【AWS】知識ゼロから理解するRDS超入門
AWSのデータベースサービス「Amazon RDS」を初心者にもわかるように解説します。未経験には難しいMultiAZ構成やレプリケーションは、マスター/スレ...
WordPressのテーマを構成するテンプレートの種類
WordPress（ワードプレス）のテーマを作成するには、まずはどのようなファイルがテーマを構築しているのか、理解していきましょう。
以下の表が、代表的なWordPressのテーマを構成するファイルです。
| ファイル名 | 内容 |
|---|---|
| front-page.php | トップページを出力 |
| header.php | ヘッダーを出力 |
| footer.php | フッダーを出力 |
| sidebar.php | サイドバーを出力 |
| style.css | ページのデザインを作成（CSSファイル） |
| functions.php | ウィジェットやカスタマイズ機能を追加・修正 |
それぞれがとても重要な役割を持っているファイルなので、一つ一つの役割を理解していきましょう。
これらのファイルでトップページを実際に作ると、このようにそれぞれが1つのページを構築します。
この図解では、style.cssとfront-page.phpがどのような役割があるのか見えてきませんが、後半でじっくり説明していくのでとりあえずは置いておいてください。
それでは、どのようにこれらのファイルが動いているのかを見ていきましょう。
トップページとなる「front-page.php」
front-page.phpは、トップページを作成するためのファイルで最も重要なテンプレートファイルの1つです。
上の図のようにfront-page.phpには、ヘッダーやフッダー、サイドバーなどのパーツを組み込んで構成されています。
また、トップページ固有のメインコンテンツ部分のコードはこのファイルに直接書き込んでいきます。
以下のコードがfront-page.phpの基本構造となっています。
<!-- headerを呼び出し -->
<?php get_header(); ?>
<div class="container">
<div class="contents">
<!-- ココにメインコンテンツを記入 -->
</div>
<!-- side barを呼び出し -->
<?php get_sidebar(); ?>
</div>
</div>
<!-- footerを呼び出し -->
<?php get_footer(); ?>
get_header()やget_sidebar()、get_footer()というメソッドを使うことで、別ファイルで作成したheader.phpやsidebar.phpを呼び出します。
また、front-page.phpと似たような役割を持つhome.php、index.phpというテンプレートファイルについても簡単に説明しておきます。
| ファイル名 | 内容 | 優先順位 |
|---|---|---|
| front-page.php | トップページを出力（サイトのカスタムフロントページ用テンプレート） | 1 |
| home.php | トップページを出力（カスタムブログ投稿インデックスページ用テンプレート） | 2 |
| index.php | トップページを出力（汎用トップページテンプレート） | 3 |
3つのテンプレートには、優先順位が
front-page.php > home.php > index.php
このようにあり、front-page.phpが存在する場合は、最優先にトップページとしてfront-page.phpが表示されるのです。
また、front-page.phpが存在しない場合は、「フロントページの表示」が「最新の投稿」の場合はhome.phpが、「固定ページ」の場合は、固定ページとしてpage.phpが表示されます。
そして、front-page.phpもhome.phpもpage.phpも存在しない場合は最後の砦としてindex.phpが表示されます。
上の表では、front-page.phpとhome.phpで使用用途をわけて書きましたが厳密な使い分けはさせていないようなので、トップページに何を使えばいいのか迷った時はfront-page.phpを選びましょう。
ヘッダー画面を構成する「header.php」
header.phpを文字通り、ヘッダー画面を構成するテンプレートファイルです。
ここに書いていくことは主に、
- <head>要素
- <header>要素
この2つの要素です。
ここでは、サンプルテーマ「twentyseventeen」のheader.phpの抜粋を例にして解説します。
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<?php get_template_part( 'template-parts/header/header', 'image' ); ?>
<?php if ( has_nav_menu( 'top' ) ) : ?>
<div class="navigation-top">
<div class="wrap">
<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
</div><!-- .wrap -->
</div><!-- .navigation-top -->
<?php endif; ?>
</header><!-- #masthead -->
一度HTMLに触れたことがある人なら理解するのは、そこまで難しくないと思います。
<meta>要素の中には、デバイスごとの画面サイズで表示するためのviewportを設定していたり、<body>要素のなかに<div>要素で括った<header>要素を構成させたりしています。
ここで、WordPress初心者の人にとって厄介なのは、WordPress特有のメソッド（関数）です。
まずは、wp_head()メソッドです。
詳細は少しややこしくなるので後半の記事で行いますが、これを簡単にいうと、プラグインやAPIを使用する時に必要な<meta>要素を自動的に挿入してくれるメソッドです。
そのため、プラグインを使う際には欠かせないメソッドなのです。
次に、get_template_part()メソッドです。
このメソッドを使うと、他のテンプレートファイルをこのファイルに読み込むことができます。
ここでは、/template-parts/headerというディレクトリの中にあるheader-image.phpを読み込んでいます。
ちなみにここで読み込んでいるheader-image.phpの中身は以下のようになっています。
<div class="custom-header">
<div class="custom-header-media">
<?php the_custom_header_markup(); ?>
</div>
<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
</div><!-- .custom-header -->
汎用性のあるコードの再利用性を高めたり、親ファイルのコードが綺麗に見やすくするためにこのように読み込むコードが短い場合でもパーツ化して使います。
最後に、has_nav_menu()メソッドです。
これは、登録されたナビメニューが有るか無いかで真偽を返すメソッドです。
今回の場合だとtopという名称のナビメニューが存在する場合は、<div class="navigation-top">要素を表示するという条件分岐に用いています。
フッター画面を構成する「footer.php」
footer.phpはフッター画面を構成するテンプレートファイルです。
基本的にはheader.phpと同様にHTMLを書いていけばOKです。
では、サンプルテーマ「twentyseventeen」のfooter.phpの抜粋を見ていきましょう。
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="wrap">
<?php
get_template_part( 'template-parts/footer/footer', 'widgets' );
if ( has_nav_menu( 'social' ) ) : ?>
<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'social',
'menu_class' => 'social-links-menu',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
) );
?>
</nav><!-- .social-navigation -->
<?php endif;
get_template_part( 'template-parts/footer/site', 'info' );
?>
</div><!-- .wrap -->
</footer><!-- #colophon -->
<?php wp_footer(); ?>
header.phpでも登場していたget_template_part()メソッドやhas_nav_menu()メソッドもありますね。
ここでは、新しく登場したwp_nav_menu()メソッドに注目してください。
このメソッドは、ナビゲーションメニューを表示することができます。
しかも、ナビゲーションメニューの中に表示させる要素はブラウザで開いたWordPressのカスタマイズメニューから追加することができるのです。
このメソッド引数には配列が入り、そのパラメータとして以下のような値を入れることができます。
（上記のコードで使用しているものを赤字で表示します。）
| パラメータ | 内容 | 初期値 |
|---|---|---|
| menu | 望ましいメニュー id, slug, name をこの順で受け入れる |
なし |
| menu_class | メニューを構成する ul 要素に適用するCSS クラス名 | menu |
| menu_id | メニューを構成する ul 要素に適用するID | {メニューのスラッグ}-{連番} |
| container | ul をラップするタグを選択（divまたはnav） コンテナをなしにする場合は false |
div |
| container_class | コンテナに適用されるクラス名 | menu-{メニューのスラッグ}-container |
| container_id | コンテナに適用されるID | フッダーを出力 |
| fallback_cb | メニューが存在しない場合に呼び出すコールバック関数 | wp_page_menu |
| before | リンクテキストの前のテキスト | なし |
| after | リンクテキストの後のテキスト | なし |
| link_before | リンクの前のテキスト | なし |
| link_after | リンクの後のテキスト | なし |
| echo | メニューをHTML出力する(true)か、PHPの値で返す(false)かの選択 | true |
| depth | 表示する階層数（0 は全階層） | 0 |
| walker | 使用するカスタムウォーカーオブジェクト ｀ | new Walker_Nav_Menu |
| theme_location | テーマの中で使われる位置 | なし |
| items_wrap | Sprintf()関数の引数として評価される書式の文字列 | <ul id="%1$s" class="%2$s">%3$s</ul> |
このパラメータを変更することで、どのようなメニューを表示するかを決定します。
サンプルテーマの場合は、<span>要素でリンクを囲って、メニューの<ul>要素のクラス名をsocial-links-menuとしています。
サイドバー画面を構成する「sidebar.php」
sidebar.phpはサイドバー画面を構成するテンプレートファイルです。
では、サンプルテーマ「twentyseventeen」のsidebar.phpの抜粋を見ていきましょう。
<aside id="secondary" class="widget-area" role="complementary" aria-label="<?php esc_attr_e( 'Blog Sidebar', 'twentyseventeen' ); ?>">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->
サイドバーはウィジェットで動的に生成させるのが、一般的なのでこのファイルに書くことはそこまでありません。
ウィジェットの動的に生成するためのメソッドが、dynamic_sidebar()メソッドです。
sidebar-1という引数は、functions.phpで以下のように定義して、アクションフックという機能を用いて、Blog Sidebarというウィジェットを追加します。（後半で詳しく説明します。）
function twentyseventeen_widgets_init() {
register_sidebar( array(
'name' => __( 'Blog Sidebar', 'twentyseventeen' ),
'id' => 'sidebar-1',
'description' => __( 'Add widgets here to appear in your sidebar on blog posts and archive pages.', 'twentyseventeen' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'twentyseventeen_widgets_init' );
register_sidebar()メソッドがウィジェットを登録するメソッドで、上記で解説したwp_nav_menu()と近く、初めと終わりのタグ要素などの定義を行います。
ウィジェットの要素の追加は、ブラウザからWordPressのカスタマイズメニューで行うことができます。
今回のまとめ
今回は、WordPressでトップページを作成するための最低限の構成ファイルについて解説していきました。
| ファイル名 | 内容 |
|---|---|
| front-page.php | トップページを出力 |
| header.php | ヘッダーを出力 |
| footer.php | フッダーを出力 |
| sidebar.php | サイドバーを出力 |
WordPressに初めて触れる人にとって最も厄介なのは、やはりこのテンプレートファイルの構造とWordPress特有のメソッドだと思います。
今回は、全てとは言えませんがかなり基本的なところは抑えられたのではないでしょうか。
後半では、デザインを整えるためのstyle.cssとWordPressの機能を追加・修正を行うためのfunctions.phpについて解説していきます。
