iEhohs.com

社内SEとウェブ担当を目指す人のメモブログ

高橋のり (2013)『基礎からのWordPress』ソフトバンククリエイティブ.学習メモ

読書メモ

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

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

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

作成するのはSentence WP

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

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

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

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

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

テーマを変更する準備

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

子テーマの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’)コメント欄へのリンク(無い時, 1件, 2件以上の表示, 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()サムネイルがあるか否か
add_image_size(‘name’, width, height, crop)アイキャッチ画像にサイズを追加(名前, 幅, 高さ, 切り抜くか否か)
get_the_post_thumbnail(id, size)アイキャッチ画像を表示
get_query_var(‘var’)$wp_queryが持つ情報を取得(インデックス)
get_year_link(year)年別アーカイブのURL
get_month_link(year, month)月別アーカイブのURL
get_day_link(year, month, day)日別アーカイブのURL
get_ancestors(id, type)祖先となる要素のIDを配列にして取得(ID, category or pageを指定)
query_posts(query)WordPressループの対象を条件により絞り込む(文字列や配列)
get_post_meta(id, name, single)カスタムフィールドの値を取得(記事のID, カスタムフィールドの名前, 単一の値として使うならtrue、配列ならfalse)

ファビコンの表示

<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()は1つ目の記事しか表示しません。

すべての記事に日付を表示する場合は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 -->

固定ページにアイキャッチ画像を表示

<div id="header-image">
<?php
if (is_page() && has_post_thumbnail($post->ID)):
   echo get_the_post_thumbnail($post ->ID, "header-image");
else:
?>
   <img src="<?php header_image(); ?>"
        width="<?php echo get_custom_header()->width; ?>"
        height="<?php echo get_custom_header()->height; ?>" alt="" />
</php
endif;
?>
</div>

パンくず

<?php
function breadcrumb() {
	global $post;
 	$str = '';
 	if (!is_home() && !is_admin()){
 		$str .= '<div id="breadcrumb">';
		$str .= '<div id="breadcrumb-inner">';
		$str .= '<ul>';
		$str .= '<li><a href="'. home_url('/') .'/">ホーム</a></li>';
 		$str .= '<li>></li>';    
	  
		if (is_search()){
			$str .= '<li>「'. get_search_query() .'」で検索した結果</li>';
		} elseif (is_tag()){
			$str .= '<li>タグ:'. single_tag_title('', false). '</li>';
		} elseif (is_404()){
			$str .= '<li>404 Not found</li>';
		} elseif (is_date()){
			if(is_day()){
				$str .= '<li><a href="'. get_year_link(get_query_var('year')) .'">'. get_query_var('year') .'年</a></li>';
				$str .= '<li>></li>';
				$str .= '<li><a href="'. get_month_link(get_query_var('year'), get_query_var('monthnum')). '">'. get_query_var('monthnum') .'月</a></li>';
				$str .= '<li>></li>';
				$str .= '<li>'. get_query_var('day'). '日</li>';
			} elseif(is_month()){
				$str .='<li><a href="'. get_year_link(get_query_var('year')) .'">'. get_query_var('year') .'年</a></li>';
				$str .='<li>></li>';
				$str .='<li>'. get_query_var('monthnum') . '月</li>';
			} else {
				$str .='<li>'. get_query_var('year') .'年</li>';
			}
		} elseif (is_category()){
			$cat = get_queried_object();
			if ($cat -> parent != 0){
				$ancestors = array_reverse(get_ancestors($cat -> cat_ID, 'category' ));
				foreach ($ancestors as $ancestor){
					$str .='<li><a href="'. get_category_link($ancestor) .'">'. get_cat_name($ancestor) .'</a></li>';
					$str .='<li>></li>';
				}
			}
			$str .='<li>'. $cat -> name .'</li>';
		} elseif (is_author()){
			$str .= '<li>投稿者:'. get_the_author_meta('display_name', get_query_var('author')). '</li>';
		} elseif (is_page()){
			if ($post -> post_parent != 0){
				$ancestors = array_reverse(get_post_ancestors($post -> ID));
				foreach ($ancestors as $ancestor){
					$str .= '<li><a href="'. get_permalink($ancestor). '">'. get_the_title($ancestor) .'</a></li>';
					$str .= '<li>></li>';
				}
			}
		$str .= '<li>'. $post -> post_title .'</li>';
		} elseif (is_attachment()){
			$str .= '<li>'. $post -> post_title .'</li>';
		} elseif (is_single()){
			$categories = get_the_category($post->ID);
			$cat = $categories[0];
			if ($cat -> parent != 0){
				$ancestors = array_reverse(get_ancestors($cat -> cat_ID, 'category'));
				foreach ($ancestors as $ancestor){
					$str .= '<li><a href="'. get_category_link($ancestor) .'">'. get_cat_name($ancestor). '</a></li>';
					$str .= '<li>></li>';
				}
			}
			$str .= '<li><a href="'. get_category_link($cat -> term_id). '">'. $cat -> cat_name .'</a></li>';
			$str .= '<li>></li>';
			$str .= '<li>'. $post -> post_title .'</li>';
		} else {
			$str .= '<li>'. wp_title('', true) .'</li>';
		}
		$str .= '</ul>';
		$str .= '</div>';
		$str .= '</div>';
 	}
	echo $str;
}

?>

想像以上に複雑だったのがパンくず。表示しているページによって分岐しまくるのでややこしい。これだけやったら何でもできそうな気がします。

functions.phpに記述して、表示したいところ(主にheader.php)にbreadcrumb()で呼び出せばOK。

変数strに必要なHTMLコードを次々と追加していって一気に出力します。

順番におさらいすると、

  • 4行目:global $postで関数内で使用できるようにする
  • 5行目:ホーム画面か管理画面では非表示にする
  • 19行目:get_year_link(get_query_var(‘year’))で年別アーカイブのリンク取得、get_query_var(‘year’)で年を取得
  • 32行目:get_queried_objectでカテゴリーの階層などのオブジェクト取得
  • 33行目:array_reverse(get_ancestors($cat -> cat_ID, ‘category’))でカテゴリーの順番を逆にする
  • 34行目:foreachで配列が終わるまでループ(ancestorsをancestorとして表記)

関連記事を表示するサブループをつくる

<?php
$categories = get_the_category($post -> ID);
$category_ID = array();

foreach($categories as $category);
  array_push($category_ID, $category -> cat_ID);
endforeach;

$args = array(
  'post__not_in' => array($post -> ID),
  'category__in' => $category_ID,
  'posts_per_page' => 3,
  'orderby' => 'rand'
);
$my_query = new WP_Query($args);
?>

<div class="related-posts">
<h3 id="related">関連記事</h3>
<?php
if($my_query -> have_posts()):
?>
  <ul id="related-posts">
<?php
  while($my_query -> have_posts()) : $my_query -> the_post();
?>
    <li class="clearfix">
      <div class="content-box">
        <h4><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4>
        <p class="date"><?php echo get_the_date(); ?></p>
        <?php the_excerpt(); ?>
      </div>
      <p class="thumbnail-box">
        <a href="<?php the_permalink() ?>" title="「<?php the_title(); ?>」の続きを読む">
<?php
        if (has_post_thumbnail()):
          the_post_thumbnail(array(100, 100));
        else:
?>
          <img src="<?php echo get_template_directory_uri(); ?>/images/noimage.gif" width="100" height="100" alt="" />
<?php
        endif;
?>
        </a>
      </p>
    </li>
<?php
  endwhile;
><
  </ul>
<?php
else:
?>
  <p>関連する記事はありませんでした ...</p>
<?php
endif;
php wp_reset_postdata();
?>
</div>

メインループの中にサブループをつくります。category_IDという空の配列を作成し、表示している記事のカテゴリーIDをすべて格納します。

argsに以下の値を格納し、my_queryという変数に格納します。

  • post__not_in:表示したくない投稿
  • category__in:表示したいカテゴリー
  • posts_per_page:何件表示するか
  • orderby:順番(ランダムはrand、日付順はdate、コメント数はcomment_count、更新日はmodified)

あとはこのmy_queryでループをつくれば関連記事の完成です。

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

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です