WordPressテーマの共通部分の切り出し

以前中身がほぼ空のテーマを作成しました。

今回はそこから共通部分を切り出して、少しだけ実装して見たいと思います。

 

使いまわせる要素

サイトでは多く使いまわされる部分があります。一般的な配置でいうと、画面上のヘッダ、画面横のサイドバー、画面下のフッターにあたる部分です。WordPressにはこれらの部分を使いまわすためのテンプレートが用意されており、それぞれ「header.php」「sidebar.php」「footer.php」というものです。これらを以前作成した空テーマのindex.phpから切り出してみましょう。次の部分がそれぞれのファイルにあたります。

しかし切り出しただけの状態で試しにサイトにアクセスして見ても、切り出した部分が消えています(WordPressの機能なのかhtmlに最低限必要な部分は補ってくれはしますが)。これはindex.phpでheader.php、sidebar.php、footer.phpの内容の呼び出しを行っていないからです。index.phpに次を追加しましょう。

<?php get_header(); ?>
  <main id="main">
    <article class="article">
      <p>記事です。</p>
    </article>
  </main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

<?php>に囲まれた部分で追加されているところがありますね。このget_XXX()がそれぞれの部分を呼び出す処理になります。これで切り出しは完了です。

 

function.php

では共通部分について少しだけ実装してみましょう。そのためにfunction.phpの内容を記述してみます。なお、最終行にphpの閉じタグがないのは意図通りです。純粋なphpだけで記述されたファイルの場合は閉じタグをつけないのが通例だそうです。

<?php
if ( ! function_exists( 'theme_setup' ) ) :
function theme_setup() {
  /* 自動フィードリンク */
  add_theme_support( 'automatic-feed-links' );

  /* titleを自動で書き出し */
  add_theme_support( 'title-tag' );

  /* アイキャッチ画像を設定できるようにする */
  add_theme_support( 'post-thumbnails' );

  /* 検索フォーム、コメントフォーム、コメントリスト、ギャラリー、キャプションでHTML5マークアップの使用を許可します */
  add_theme_support( 'html5', array(
    'search-form',
    'comment-form',
    'comment-list',
    'gallery',
    'caption',
  ) );

  /* テーマカスタマイザーにおける編集ショートカット機能の使用 */
  add_theme_support( 'customize-selective-refresh-widgets' );

  /* カスタムメニュー位置を定義 */
  register_nav_menus( array(
    'global' => 'グローバルナビ',
    'footer' => 'フッターナビ',
  ) );

  /* カスタムロゴ設定 */
  add_theme_support('custom-logo');
}
endif;
add_action( 'after_setup_theme', 'theme_setup' );

/* サイドバーを定義 */
if ( ! function_exists( 'widgets_init' ) ) :
  function widgets_init() {
    register_sidebar( array(
      'name'          => 'Sidebar',
      'id'            => 'sidebar-1',
      'description'   => 'ここにウィジェットを追加',
      'before_widget' => '<section id="%1$s" class="widget %2$s">',
      'after_widget'  => '</section>',
      'before_title'  => '<h2 class="widget-title">',
      'after_title'   => '</h2>',
    ) );
  }
endif;
add_action( 'widgets_init', 'widgets_init' );

これによってサイドバーにウィジェットと呼ばれるものを追加したり、ヘッダーにメニューを定義したりする準備が整います。それ以外にも基本的というか最低限あってもいいかなと思う機能もついでに定義しました。上記に示したfunction.phpの記述はテーマを作る際におまじない的に書いてもいいかもしれませんね。

ただ一個一個詳細に見ていくと少し長い記事になってしまいますので、この辺りは次のサイトなどで詳しく説明されていますのでご参照ください。私もこのサイトにはお世話になりました。

 

header.php

それではheader.phpから実装します。まずは実装したものを見てみます。

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>

<body id="body" <?php body_class(); ?>>
  <header id="header">
    <!-- 追加箇所 -->
<?php
if ( is_front_page() && is_home() ) :
?>
    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php
else :
?>
    <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
<?php
endif;
$description = get_bloginfo( 'description', 'display' );
if ( $description ) :
?>
    <p class="site-description"><?php echo $description; ?></p>
<?php
endif;
?>
    <nav id="grobal-navigation">
<?php
wp_nav_menu( array(
  'theme_location' => 'global',
  'menu_id'        => 'grobal-menu',
) );
?>
    </nav>
    <!-- 追加箇所ここまで -->
  </header>

これでサイトタイトル、サイトの説明、メニューを出力します。少し詳しくみていきます。

・is_front_page()、is_home()とif文処理について

このis_XXX系は今表示されているページの種類(トップページ、記事ページ、固定ページ、アーカイブページ…etc)かどうかを判断してくれます。この関数を用いてホームページだったらこの表示をして・・・など場合分けできます。ここではトップページだったらサイトのタイトルをそのまま大見出し(h1)にして、記事ページなどではh1は記事のタイトルになるので、pでサイトタイトルを出力してというように場合分けしています。「h1はページに一つ」という考え方を忠実に守るならこのようになると思います。

・echo esc_url( home_url( ‘/’ ) );

サイトタイトルにトップページのリンクを張っています。esc_urlはURLに問題がある(無効な文字が含まれているなど)場合にURLとして大丈夫な形にしてくれる関数だそうです。

・bloginfo( ‘name’ )

WordPressダッシュボードの「設定」→「一般」→「サイトのタイトル」で設定されている文字列を出力します。

・wp_nav_menu()

function.phpで定義したメニューの出力をここで行いますよという関数です。

 

sidebar.php

<aside id="sidebar">
  <!-- 追加箇所 -->
  <?php dynamic_sidebar( 'sidebar-1' ); ?>
  <!-- 追加箇所ここまで -->
</aside>

・dynamic_sidebar( ‘sidebar-1’ )

function.phpで定義されたid=”sidebar-1″のサイドバーをここで出力しますよという関数です。これでWordPressでサイドバーにウィジェットを追加できるようになります。

 

footer.php

  <footer id="footer">
    <!-- 追加箇所 -->
    <nav id="footer-navigation">
<?php
wp_nav_menu( array(
  'theme_location' => 'footer',
  'menu_id'        => 'footer-menu',
) );
?>
    </nav>
    <!-- 追加箇所ここまで -->
  </footer>
<?php wp_footer(); ?>
</body>
</html>

・wp_nav_menu()

ヘッダーと同じ関数です。定義されたメニューを出力します。

 

上記をテストするためにWordPressテーマ開発のお供「WordPress Codex日本版」で配布されているテーマテスト用のデータを使用します。投稿やカテゴリなどテスト用のデータが登録されます。

インポートの方法は、WordPressのダッシュボードの「管理画面」→「ツール」→「インポート」→「WordPress」を選択してプラグインをインストール。続けて「インポーターの実行」→「ファイルを選択」でダウンロードしたxmlを読み込みます。

ヘッダーのメニューとサイドバーのメニューはテストデータに最初から登録されていたものをそのまま利用し、そしてサイドバーのウィジェットが空だったのでとりあえずアーカイブを追加して動かしてみました。想定通りタイトルと説明、ヘッダメニュー、サイドバー(アーカイブ一覧)、フッターメニューが表示されていることが確認できます。

 

まとめ

今回は共通部分を切り分けて共通部分に基本的な機能を付加しました。そしてテストデータで作成した機能を動かして見ました。取り合えずここまでのテーマのデータを添付してみます。

test_theme

次はindex.phpに記事一覧を表示させる機能を実装してみる記事を書いてみようと思います。

 

return-top