WordPressの自作をした時テンプレートファイルのまとめです。
自作と言ってもここを参照しました。自分で作ってみることでよりWordPress のthemeがどう作られているか理解できたと感じます。
PCにローカル環境作るのは前の投稿を参照してください。
テンプレートファイルとは、WordPressのThemeを作っているPHPファイルでPHP code, htmlそしてテンプレートタグで構成されています。
テンプレートタグとは、WPの独自のfunciton(関数）でサイトのタイトルや内容などを表示することに使用されます。例えば、the_title() やthe_content()等です。
1. header.php
サイトのヘッダーを表示するためのPHPファイルです。以下はサンプルです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0 "> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--スタイルシートの呼び出し--> <?php wp_head(); ?> <!--システム・プラグイン用--> </head> <body <?php body_class(); ?>> <header> <div class="header-inner"> <div class=”site-title> <h1><a href=”<?php echo home url(); ?>> <?php bloginfo(‘name’);?></a></h1> </div> </div> <!—Header menu--> <?php wp_nav_menu (array ( ‘theme_location’=> ‘header-nav’, ‘container’=> ‘nav’, ‘container_class’=> ’header-nav’, ‘container_id’=> ‘header-nav’, ‘fallback_cb’ => ‘’ ) ); ?> </header> |
以下が使用されているテンプレートタグです。
wp_head(): jQueryライブラリーやcssなどサイトの情報やメタデータが出力されます。
body_class(): WordPressページの <body> タグにクラスを追加
echo get_stylesheet_uri():スタイルシートの呼び出し
echo home url(): homeのURL出力
bloginfo(‘name’): ブログのタイトルの呼び出し
wp_nav_nemu(array ( )): ナビゲーションメニューの作成
theme_location
functions.phpに記述した値と作成するメニューを関連付ける。
container
メニュー全体を囲むタグを指定する。メニュー全体が自動的にnavタグの中に出力される。
container_class/container_id
全体を括るタグのクラス名とId名をつけることができる。
fallback_cb
メニューが表示されてないとき、意図しない表示（wp_page_menuが初期値）をしないように”を指定。
|
1 2 3 4 5 6 7 8 9 10 |
<footer> <div class="footer-inner"> <div class="copyright"> <p><?php echo "Copyright © " .date('Y'); echo " "; bloginfo( 'name' ); ?> All Rights Reserved.</p> </div> </div> </footer> <?php wp_footer(); ?><!--for system plugin use--> </body> </html> |
wp_footer()：Header同様に自動的に項目が出力されます。システムやプラグインが情報を出力するのに必要なWPのFunctionです。
|
1 2 3 4 5 |
<aside id="sidebar"> <div class="sidebar-inner"> <?php dynamic_sidebar('side-widget');?> </div> </aside> |
dynamic_sidbar(‘side-widget’)：WidgetにSidebarが表示されます。
4. index.php
トップページやカテゴリー、タグ、エラーページなど一覧を表示するためのPHPファイルです。
home.php, category.php, archieve.php等がない時は全てindex.phpから表示されます。
上記の絵にあるように、 header、footer, sidebarを呼び出してそれぞれの部分を表示させ、Main contentsも記述するテンプレートファイルです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<?php get_header(); ?> <div class="container"> <div class="contents"> <?php if(have_posts()): while(have_posts()): the_post(); ?> <article <?php post_class( 'post-list' ); ?>> <a href="<?php the_permalink(); ?>"> <!--画像を追加--> <?php if( has_post_thumbnail() ): ?> <?php the_post_thumbnail('medium'); ?> <?php else: ?> <img src="<?php echo get_template_directory_uri(); ?>/images/no-image.gif" alt="no-img"/> <?php endif; ?> <div class="text"> <!--タイトル--> <h2><?php the_title(); ?></h2> <!--投稿日を表示--> <span class="post-date"> <i class="fas fa-pencil-alt"></i> <time datetime="<?php echo get_the_date( 'm-d-Y' ); ?>"> <?php echo get_the_date(); ?> </time> </span> <!--抜粋--> <?php the_excerpt(); ?> </div> </a> </article> <?php endwhile; endif; ?><!--ループ終了--> <div class="pagination"> <?php echo paginate_links( array( 'type' => 'list', 'mid_size' => '1', 'prev_text' => '«', 'next_text' => '»' ));?> </div> </div><!--contents--> <?php get_sidebar(); ?> </div><!--container--> <?php get_footer(); ?> |
get_header()：ヘッダーテンプレートを呼び出す。
get_sidebar()：サイドバーテンプレートを呼び出す。
get_footer()：フッターテンプレートを呼び出す。
if(have_posts()): while(have_posts()): the_post(): 投稿記事が存在したら（If)、投稿記事が存在する間（While) 記事を記述する。
post_class( ‘post-list’ )：post-listというクラスを作成する。
the_permalink()：記事のリンクを貼る。
if( has_post_thumbnail() ):サムネイル画像が存在するなら、
the_post_thumbnail(‘medium’)：サムネイル画像を中のサイズで貼る。
else:サムネイル画像がなければ（no-image.gifを出力）
endif：サムネイル画像IfのEndif
the_title()：タイトル出力
echo get_the_date( ‘m-d-Y’ )：日付を月ー日ー年で表示
the_excerpt()：抜粋を出力
endwhile; endif ：投稿記事が存在したら（If)、投稿記事が存在する間（While)の終了
echo paginate_links( array(
‘type’ => ‘list’,
‘mid_size’ => ‘1’,
‘prev_text’ => ‘«’,
‘next_text’ => ‘»’
) )：ページネーションを表示
5. single.php
投稿したシングルのページを表示するためのPHPファイルです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<?php get_header(); ?> <div class="container"> <div class="contents"> <?php if(have_posts()): the_post(); ?> <!--post contents--> <article <?php post_class( 'post' ); ?>> <div class="post-info"> <!--投稿日を取得--> <span class="post-date"> <i class="fas fa-pencil-alt"></i> <time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>"> <?php echo get_the_date(); ?> </time> </span> <!--カテゴリ取得--> <?php if(has_category() ): ?> <span class="cat-data"> <?php echo get_the_category_list( ' ' ); ?> </span> <?php endif; ?> </div><!--post-info--> <!--タイトル--> <h1><?php the_title(); ?></h1> <!--アイキャッチ取得--> <?php if( has_post_thumbnail() ): ?> <div class="post-img"> <?php the_post_thumbnail( 'large' ); ?> </div> <?php endif; ?> <!--本文取得--> <?php the_content(); ?> <!--タグ--> <div class="post-tag"> <?php the_tags('<ul><li>Tags： </li><li>','</li><li>','</li></ul>'); ?> </div> </article> <?php endif; ?><!--have posts--> </div><!--contents--> <?php get_sidebar(); ?> </div><!--container--> <?php get_footer(); ?> |
index.phpと同様にPostが存在すれば出力するようになっています。
echo get_the_category_list( ‘ ‘ ): 記事に設定されているカテゴリをリンク付きで呼び出す。
the_content()：記事本文を出力。
php the_tags(～Tags：～)：
記事に設定されているタグをリスト形式全て呼び出します。
最初に「Tags：」という文字が入るようにリストの中に組込む設定も行っています。
6. functions.php
Theme独自のFunction(関数）を定義するPHPファイルです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php //set up the theme // Create a title tag in the header. add_theme_support( 'title-tag' ); // Mark up by HTML5 add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) ); // Create automatic feed links add_theme_support( 'automatic-feed-links' ); //setting up using eye-catch pictures add_theme_support( 'post-thumbnails' ); //カスタムメニュー register_nav_menu( 'header-nav', 'Header Navigation' ); register_nav_menu( 'footer-nav', 'Footer Navigation' ); //サイドバーにウィジェット追加 function widgetarea_init() { register_sidebar(array( 'name'=>'Sidebar', 'id' => 'side-widget', 'before_widget'=>'<div id="%1$s" class="%2$s sidebar-wrapper">', 'after_widget'=>'</div>', 'before_title' => '<h4 class="sidebar-title">', 'after_title' => '</h4>' )); } add_action( 'widgets_init', 'widgetarea_init' ); |
add_theme_support(‘title-tag’): ヘッダーにタイトルを表示させます。
add_theme_support( ‘html5’, array( ‘search-form’, ‘comment-form’, ‘comment-list’, ‘gallery’, ‘caption’ ) ) ：html5でマークアップさせます。
add_theme_support( ‘automatic-feed-links’ )：Feedのリンクを自動で生成します。
add_theme_support( ‘post-thumbnails’ )：アイキャッチ画像を使用する設定です。
register_nav_menu( ‘header-nav’, ‘Header Navigation’)：メニューのLocationにHeader Navigationを追加します。
register_nav_menu( ‘footer-nav’, ‘Footer Navigation’)：メニューのLocationにFooter Navigationを追加します。
register_sidebar (array ()):
name
サイドバーに名前を付ける（Sidebar）
Id
ウィジットエリアにIdをつける。ここで指定した値を使ってSidebar.phpの中にサイドバーを呼び出す。
before_widget/after_widget
ウィジットの前と後の要素の値を指定。ウィジットアイテムの種類別に異なる Id/Class名が反映されるように、id=”%2$s” class=”%2$s”と記述。
各ウィジットごとの名前と各アイテム共通のSidebar-wrapperというクラス名が反映されるようになっている。
before_title/after_title
各ウィジットにタイトルが付けられた時のタグの設定。この場合h4を使用。
7. style.css
サイトのデザインを指定するスタイルシートです。
|
1 2 3 4 5 6 |
/* Theme Name: WP practice Description: WP practice Version:1.0 Author: Ritsuko */ |
上記を記述してWordPressにUploadするとTheme概要に表示されます。
まとめると、
基本的なWordPressでのサイトを構成するテンプレートファイルとテンプレートタグ等は理解できたと思います。
WP独自のFunctionは多くあるのでこれからまた色々試していきたいと考えています。