WordPressテーマを本格的に作っていこうと思い、元々使っていたTwenty Tweleveをベースにしようかと思いましたが、基礎固めも必要ということで『基礎からのWordPress』で学びながら進めていくことにしました。

そういうわけで学習用テーマ「Simple Simple」をインストールしました。本書に書いてあることを少しずつ学びながら、自分好みにしていきます。

Simple Simpleは書籍の紹介サイトでダウンロードすることができます。

作成するのはSentence WP

いちからデザインするのは大変なので、僕がはてなブログ時代につくった「Sentence」というテーマのWordPress版をつくることにしました。

文章が読みやすく、読み込む速度も速い、そして広告が配置しやすいとうコンセプトでつくったテーマです。結構ガチで考えてつくったので今見ても良いデザインだなと自画自賛しています。自分の欲を発散させるためにつくったテーマでしたが、ありがたいことに多くの人から支持を得られましt。

これからつくるものは区別するために「Sentence WP」という名称にしましょう。完成したら配信も考えておりますが、しばらくは自分用で。

はてなブログの時は基本となるHTMLは固定で、CSSだけをカスタマイズできるという仕様でした。WordPressのテーマ作成はHTMLでできた骨格部分からいじれるので、より洗練したものに仕上げたい所存です。

そういうわけで、Sentence WPが完成するまでは、Twenty Twelveと行ったり来たりになります。見るたびにデザインが変わっているかもしれませんがご理解いただければ。

テーマを変更する準備

テーマを変更する準備をします。といっても、headerに独自で埋め込んでいるタグを移すだけです。アナリティクスとかウェブフォントとかです。

WordPressテーマをカスタマイズするために子テーマを作成

子テーマのfunctions.phpからheaderに追記するコードを使っているので、Sentence WPの子テーマにあるfunctions.phpにコピペするのみです。

学習メモ

ここからは学習メモとして使っていきます。個人用の備忘録ですのであしからず。

テンプレートタグ

タグ	意味
home_url	ホームのURL
bloginfo(‘name’)	ブログのタイトル
bloginfo(‘description’)	ブログのキャッチフレーズ
bloginfo(‘url’)	ブログのURL
get_search_form()	検索フォームを表示
wp_nav_menu()	ナビゲーションメニューを表示
is_home	メインページが表示されたいたら
is_page	固定ページが表示されていたら ※!is_○○にするとNOTの意味
is_category	カテゴリーページが表示されていたら
is_tag	タグページが表示されていたら
is_search	検索結果ページが表示されていたら
wp_title(‘::’, true, ‘right”)	「記事タイトル::ブログタイトル」にする
get_template_directory_uri()	テーマフォルダまでのパスを取得
get_stylesheet_uri()	style.cssまでのパスを取得
wp_head()	headerの末尾に入れてプラグインを有効化
wp_footer()	footerの直前に入れてプラグインを有効化
the_ID()	記事のIDを取得
post_class()	記事に合わせてクラスをつける
the_permalink()	記事のパーマリンク
the_title(‘before’, ‘after’, echo)	記事タイトル（前の表示, 後ろの表示, 表示するか否か）
the_date(‘format’, ‘before’, ‘after’, echo)	日付（フォーマット, 前の表示, 後ろの表示, 表示するか否か）
get_the_date()	日付
the_category(‘separator’, ‘parents’, post_id)	カテゴリー（区切り文字, 親要素を表示するかsingle or multiple, カテゴリー記事のID）
comments_popup_link(‘zero’, ‘one’, ‘more’, ‘CSSclass’, ‘none’)	コメント欄へのリンク（無い時, １件, ２件以上の表示, CSSのクラス, コメント無許可時）
the_content(‘more_link_text’, display)	本文（moreタグで表示される文字列, moreタグより前の本文を表示するか否か）
previous_posts_link(“Label’, Max number of pages)	前ページ（リンク文字列, 最大ページ数）
next_posts_link(“Label’, Max number of pages)	次ページ（リンク文字列, 最大ページ数）
wp_link_pages(args)	記事が分割されているときにページャーを表示（オプション）
the_tags(‘before’, ‘separator’, ‘after’)	タグを表示（タグの前, 区切り文字, タグの後ろ）
the_author()	投稿者
get_author_posts_url(user_id, ‘ninename’)	投稿者のアーカイブ（ユーザーID, ユーザー名）
get_the_author_meta(‘field’, user_id)	ユーザーのメタ情報から任意のものを取得（取得する情報, ユーザーID）
wp_list_comments(options)	コメントを表示（オプション）
comment_form(options)	コメントフォームを表示（オプション）
is_active_sidebar(index)	サイドバーが有効かチェック（サイドバーのID）
dynamic_sidebar(index)	ダイナミックサイドバーの表示（サイドバーのID）
wp_list_categories(args)	カテゴリーをリンクで表示（パラメータ）
wp_get_archives(args)	日付ベースのアーカイブを表示（パラメータ）
add_theme_support(‘feature’)	function.phpで機能をサポート
wp_nav_menu()	navメニューを表示
register_nav_menu(‘location’, ‘description’);	function.phpでnavメニューの場所を定義（メニューID, 説明）
the_post_thumbnail(size)	サムネイルを表示（サイズ array(x, y) or thumbnail or medium or large）
the_excerpt()	抜粋を表示
has_post_thumbnail()	サムネイルがあるか否か

ファビコンの表示

<link rer="shortcut icon" herf="<?php echo get_template_directory_uri(); ?>/image/favicon.ico" />

ファビコンの画像データがどこに置かれているかで変わります。

記事ごとにCSSを変更する

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

各投稿のIDを取得して、このIDからスタイルを分ける方法があります。

post_classは category-○○ や tag-○○ とカテゴリーやタグを取得してスタイルを分けます。

日付の表示

繰り返し処理の場合、the_date()は１つ目の記事しか表示しません。

すべての記事に日付を表示する場合はecho get_the_date()を使います。

カテゴリーのリスト

<h2>Categories</h2>
<ul>
  <?php wp_list_categories('title_li='); ?>
</ul>

wp_list_categories()は基本的にリスト形式で出力します。

HTML上でliタグを記述している場合は、wp_list_categories(‘title_li=’)を引数を指定しないとliタグが入れ子になってしまいます。

$args = array( 'title_li' => '',
               'show_count' => true,
               'depth' => -1,
);
wp_list_categories($args);

depthを-1にしてやると、親と子の入れ子がなくなります。

最近の記事、月別アーカイブ

<h2>Recent posts</h2>
<ul>
<?php
$args = array( 'type' => 'postbypost',
               'limit' => 5
);
wp_get_archives($args);
?>
</ul>

typeでpostbypostを指定すると最近の記事を表示します。limitは表示件数です。

このtypeはデフォルトではmonthlyと月別アーカイブの表示となっています。

<?php
$args = array(
    'format' => 'option',
    'show_post_count' => 1,
);
?>

<select name = "archive" onChange =
        'document.cocation.href=this.options[this.selectedIndex].value;'>
    <option value="">月別アーカイブ</option>
    <?php wp_get_archives($args); ?>
</select>

長年ブログをやっていると月別アーカイブが大量に表示されて困るという場合は、formatをoptionにしてselectタグを使いドロップダウンにしてしまう方法も。

show_post_countは1にすると投稿数を表示します。

add_theme_supportで追加できる機能

functions.phpにadd_theme_support(‘feature’)を記述することで追加できる機能です。

custom-header	カスタムヘッダー
custom-background	カスタム背景
post-thumbnails	アイキャッチ画像
menus	カスタムメニュー
automatic-feed-links	フィードリンク

記事タイトル、アイキャッチ、抜粋の構成

<div class="archive-entry-header">
  <span class="post-date"><?php the_date(); ?></span>
  <h1 class="entry-title"><a href="<?php the_permalink() ?>">
          <?php the_title(); ?></a></h1>
</div>
<span class="category"><?php the_category(', ') ?></span>
<div class="thumbnail-box">
  <?php
  if (has_post_thumbnail()):
      the_post_thumbnail("thumbnail");
  else:
  ?>
      <img src="<?php echo get_template_directory_uri(); ?>/images/noimage.png" alt="" />
  <?php
  endif;
  ?>
</div>
<div class="archive-entry-body">
  <?php the_excerpt(); ?>
</div>

ここは僕独自で考えた部分も組み合わせてます。

テンプレートのフォルダ内にあるimagesフォルダにアイキャッチが無い時用の画像を入れておく必要があります。

カスタムヘッダー

あまりカスタムヘッダーは使わないのですが、コーポレートサイトとかでは使いそうなので一応。

ヘッダー画像を背景にしてブログタイトルと説明文を表示するなどのカスタマイズ性はあるようですが、ややこしいのでここでは割愛。

functions.php

$args = array(
    'width'         => 940,
    'height'        => 250,
    'header-text'   => false,
    'default-image' => get_template_directory_uri() . '/image/header.jpg',
);
add_theme_support( 'custom-header', $args );

header.php

<div id="header-image">
    <img src="<?php header_image(); ?>"
         height="<?php echo get_custom_header() -> height; ?>"
         width="<?php echo get_custom_header() -> width; ?>" alt="" />
</div>
<!-- header -->

改訂版が出ているので、今から買うならこちらが良いかと。