More Related Content
Similar to これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜 (20)
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
- 16. テーマを構成するテンプレートファイル
WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/テーマの作成
style.css
index.php
single.php
page.php
header.php
footer.php
sidebar.php
comments.php
screenshot.png
functions.php
スタイルシート
メインのテンプレート
投稿ページのテンプレート
固定ページのテンプレート
ヘッダーのテンプレート(get_header()で読み込み)
フッターのテンプレート(get_footer()で読み込み)
サイドバーのテンプレート(get_sidebar()で読み込み)
コメント欄のテンプレート(comment_form()で読み込み)
テーマのスクリーンショット(880px × 660px)
関数(PHPの命令文)用のファイル
必須
必須
- 18. WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/テンプレート階層
ページの種類
404ページ
検索結果ページ
カテゴリーアーカイブ
タグアーカイブ
作成者アーカイブ
日付アーカイブ
投稿ページ
固定ページ
フロントページ
category-
$slug.php
tag-$slug.php
author-
$nicename.php index.php
category.php
tag.php
author.php
date.php
single-post.php
page-$id.php
front-page.php
category-$id.php
tag-$id.php
author-$id.php
page-$slug.php
404.php
search.php
archive.php
single.php
page.php
home.php
優先順位高い 低 い
- 24. /*
Theme Name: テーマ名
Theme URI: テーマのサイトURI
Author: テーマの作者名
Author URI: テーマ作者のサイトURI
Description: テーマの説明
*/
style.cssの行頭に以下を記述すると
テーマの詳細に表示されます
style.css
スタイル
シート
- 36. よく使うテンプレートタグ
WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/テンプレートタグ
サイトのタイトルを表示
<?php bloginfo( 'name' ); ?>
サイトのキャッチフレーズを表示
<?php bloginfo( 'description' ); ?>
投稿のタイトルを表示
<?php the_title(); ?>
投稿日を表示
<?php echo get_the_date(); ?>
投稿のパーマリンクを出力
<?php the_permalink(); ?>
サイトのURLを出力
<?php echo home_url(); ?>
投稿の内容を表示
<?php the_content(); ?>
投稿の抜粋を表示
<?php the_excerpt(); ?>
- 37. よく使うテンプレートタグ
WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/テンプレートタグ
投稿のカテゴリーを表示
<?php the_category(); ?>
投稿のタグを表示
<?php the_tags(); ?>
投稿のアイキャッチを表示
<?php the_post_thumbnail(); ?>
テーマディレクトリのURLを出力
<?php echo get_template_directory_uri(); ?>
- 39. <?php if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
<!-- ここに表示したい内容を記述します -->
<?php endwhile; endif; ?>
WordPressのループ
これは
「もし表示する
投稿があったら
繰り返し表示する」
ということ
トップページは
指定した回数
投稿
投稿
投稿
投稿ページや
固定ページは1回
投稿
- 43. index.php
<!DOCTYPE html>
<html lang="ja">
<head>
<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
<header>
</header>
<div id="contents">
<div id= "main-content">
<?php if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
<?php endwhile; endif; ?>
</div>
<div id="sidebar">
</div>
</div>
<footer>
</footer>
</div>
<?php wp_footer(); ?>
</body>
</html>
〜
〜
〜
〜
〜
sidebar.php
サイドバー
部分
コピペ
footer.php
フッター
部分コピペ
header.php
ヘッダー
部分
コピペ
- 46. index.php
<?php get_header(); ?>
<div id="contents">
<div id= "main-content">
<?php if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
<?php endwhile; endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
〜
header.phpをインクルード
sidebar.phpをインクルード
footer.phpをインクルード
- 48. WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/条件分岐タグ
<?php if ( is_single() ) : ?>
<!-- 投稿ページに表示される内容を記述 -->
<?php elseif ( is_page() ) : ?>
<!-- 固定ページに表示される内容を記述 -->
<?php else : ?>
<!-- それ以外のページに表示される内容を記述 -->
<?php endif; ?>
一部分だけ変えるときはファイルを分けるより
条件分岐タグを使うほうが便利です
投稿ページの場合
固定ページの場合
- 57. /*
Theme Name: テーマ名
Theme URI: テーマのサイトURI
Author: テーマの作者名
Author URI: テーマ作者のサイトURI
Description: テーマの説明
Version: テーマのバージョン
License: ライセンス
License URI: ライセンスのURI
Tags: テーマのタグ
*/
追 加
追 加
追 加
追 加
style.cssを公式用に修正します