MovableTypeからWordPressへ移行する(2) – テンプレート調整とカスタマイズ

2012年8月15日2015年9月11日Web制作, ブログWordPress, プラグイン

テンプレートを選んであーしてこーする段です。デザインもそうですが、闇雲にやってもしかたないのでここまではやりたいという落とし所を決めました。

まずベースとなるシンプルなテンプレートを探す。デフォルトのでもよかったのですが、できるだけデザインは楽をしたかったので理想に近いものを探しました。ほらさ、今はスマホとかフィードリーダー内で読まれることのほうが高かったりして、デザインは別にこることないやとかさ…。

インデックステンプレートは、アクセスしたらそのまま読めるように「続きを読む」を使わない形。これは前から一緒。そしてアーカイブや検索結果ページは一覧性を考えてサムネイル付きの概要にしたい。あとはきちんとスマホ対応、といったところ。

そんなこんなを踏まえて、ベースとしたテーマはSimplenotes。前回書いたようにこれを動かさずに親テーマとし、修正するphpのみディレクトリを分けました。（子テーマ – WordPress Codex 日本語版）

HEAD/META関係

普通にあるでしょ？ というものがなかったり、余計なものが入ってたり…。ソースを一応参考までに付けていますが、インデントが変じゃね？ 閉じるとこおかしくね？ は切り貼りに付きご容赦。アテにしないで参考サイト様へどうぞ（だめじゃんよ）。そしてiPhoneとかスマホの方、ソース部分がoverflow:hiddenしてあるので見られないけど許せ。心で感じろ。

✔ コメントフィードとかgeneratorとかいらないわー

WordPress のコメントフィードを削除する – Bluespeaker, [う]WordPressカスタマイズ：wp_head();の編集 | うかブログ参照。小テーマのfunction.phpに <?php wp_head(); ?> 関係の削除を記述。

XHTML

//wp_headの削除 remove_action('wp_head', 'feed_links_extra', 3); remove_action('wp_head', 'wp_generator'); remove_action('wp_head', 'wlwmanifest_link'); remove_action('wp_head', 'rsd_link');

1 2 3 4 5

//wp_headの削除 remove_action('wp_head', 'feed_links_extra', 3); remove_action('wp_head', 'wp_generator'); remove_action('wp_head', 'wlwmanifest_link'); remove_action('wp_head', 'rsd_link');

WordPressのHEAD要素についてはこちらも非常に参考になりました。WordPressのhead要素を整理してみる | webOpixel

✔ titleタグの記述を個別・アーカイブなどによって条件分岐

XHTML

<?php if(is_home()) { ?><title><?php bloginfo(‘name’); ?></title> <?php } elseif (is_category()) { ?><title>‘<?php single_cat_title(); ?>’ カテゴリの記事 » <?php bloginfo(‘name’); ?></title> <?php } elseif (is_month()) { ?><title><?php the_time(‘Y年F’); ?>の記事 » <?php bloginfo(‘name’); ?></title> <?php } elseif (is_year()) { ?><title><?php the_time(‘Y年’); ?>の記事 » <?php bloginfo(‘name’); ?></title> <?php } elseif (is_page()) { ?><title><?php the_title(); ?> » <?php bloginfo(‘name’); ?></title> <?php } elseif (is_single()) { ?><title><?php the_title(); ?> » <?php bloginfo(‘name’); ?></title> <?php } elseif (is_tag()) { ?><title>‘<?php single_tag_title(); ?>’ タグが付けられた記事 » <?php bloginfo(‘name’); ?></title> <?php } elseif (is_search()) { ?><title><?php $allsearch =& new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; echo ‘‘’.$key.’’ の検索結果’; ?> » <?php bloginfo(‘name’); ?></title> <?php }else{ ?><title><?php bloginfo(‘name’); ?></title><?php }?>

1

<?php if(is_home()) { ?><title><?php bloginfo(‘name’); ?></title> <?php } elseif (is_category()) { ?><title>‘<?php single_cat_title(); ?>’ カテゴリの記事 » <?php bloginfo(‘name’); ?></title> <?php } elseif (is_month()) { ?><title><?php the_time(‘Y年F’); ?>の記事 » <?php bloginfo(‘name’); ?></title> <?php } elseif (is_year()) { ?><title><?php the_time(‘Y年’); ?>の記事 » <?php bloginfo(‘name’); ?></title> <?php } elseif (is_page()) { ?><title><?php the_title(); ?> » <?php bloginfo(‘name’); ?></title> <?php } elseif (is_single()) { ?><title><?php the_title(); ?> » <?php bloginfo(‘name’); ?></title> <?php } elseif (is_tag()) { ?><title>‘<?php single_tag_title(); ?>’ タグが付けられた記事 » <?php bloginfo(‘name’); ?></title> <?php } elseif (is_search()) { ?><title><?php $allsearch =& new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; echo ‘‘’.$key.’’ の検索結果’; ?> » <?php bloginfo(‘name’); ?></title> <?php }else{ ?><title><?php bloginfo(‘name’); ?></title><?php }?>

✔ WPでは標準だとMETA keywordsやdescriptionが無い件。と思ったけど、現在はkeywordsはあってもなくても…であるようだ。ディスクリプションだけは出すか。

参考にしたのは初心者でもプラグインを使わずにtitle,meta keyword,descriptionを投稿ごとに変える[WordPress使えそうなスニペットシリーズ] | マイペースクリエイターの覚え書き だったかな。いくつか見た気がします。ブログトップではブログの情報、個別ページでは最初から文字を抽出、アーカイブページではtitleと同じような表記を入れるよう条件分岐。

XHTML

<?php if ( is_single() ) { // 単独記事ページの場合 ?> <?php if ($post->post_excerpt){ ?> <meta name="description" content="<?php echo mb_substr($post->post_content, 0, 60); ?>" /> <?php } else { $summary = strip_tags($post->post_content); $summary = str_replace("n", "", $summary); $summary = mb_substr($summary, 0, 80). "…"; ?> <meta name="description" content="<?php echo $summary; ?>" /> <?php } ?> <?php } else { // 単独記事ページ以外の場合 ?> <meta name="description" content="<?php if(is_home()) { ?><?php bloginfo(‘name’); ?> <?php } elseif (is_category()) { ?><?php single_cat_title(); ?> カテゴリの記事 | <?php bloginfo(‘name’); ?> <?php } elseif (is_month()) { ?><?php the_time(‘Y年F’); ?>の記事 | <?php bloginfo(‘name’); ?> <?php } elseif (is_year()) { ?><?php the_time(‘Y年’); ?>の記事 | <?php bloginfo(‘name’); ?> <?php } elseif (is_page()) { ?><?php the_title(); ?> | <?php bloginfo(‘name’); ?> <?php } elseif (is_tag()) { ?><?php single_tag_title(); ?> タグが付けられた記事 | <?php bloginfo(‘name’); ?> <?php } elseif (is_search()) { ?><?php $allsearch =& new WP_Query(‘s=$s&showposts=-1′); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; echo ”.$key.’ の検索結果’; ?> <?php }else{ ?><?php bloginfo(‘name’); ?><?php }?>" /> <? } ?>

1 2 3 4 5 6 7 8

<?php if ( is_single() ) { // 単独記事ページの場合 ?> <?php if ($post->post_excerpt){ ?> <meta name="description" content="<?php echo mb_substr($post->post_content, 0, 60); ?>" /> <?php } else { $summary = strip_tags($post->post_content); $summary = str_replace("n", "", $summary); $summary = mb_substr($summary, 0, 80). "…"; ?> <meta name="description" content="<?php echo $summary; ?>" /> <?php } ?> <?php } else { // 単独記事ページ以外の場合 ?> <meta name="description" content="<?php if(is_home()) { ?><?php bloginfo(‘name’); ?> <?php } elseif (is_category()) { ?><?php single_cat_title(); ?> カテゴリの記事 | <?php bloginfo(‘name’); ?> <?php } elseif (is_month()) { ?><?php the_time(‘Y年F’); ?>の記事 | <?php bloginfo(‘name’); ?> <?php } elseif (is_year()) { ?><?php the_time(‘Y年’); ?>の記事 | <?php bloginfo(‘name’); ?> <?php } elseif (is_page()) { ?><?php the_title(); ?> | <?php bloginfo(‘name’); ?> <?php } elseif (is_tag()) { ?><?php single_tag_title(); ?> タグが付けられた記事 | <?php bloginfo(‘name’); ?> <?php } elseif (is_search()) { ?><?php $allsearch =& new WP_Query(‘s=$s&showposts=-1′); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; echo ”.$key.’ の検索結果’; ?> <?php }else{ ?><?php bloginfo(‘name’); ?><?php }?>" /> <? } ?>

✔ favicon、apple-touch-iconなどの準備と記述

PCやiPhoneやiPadでブックマークされたりするとき用に準備。iPhone / iPad サイズ別 apple-touch-icon.png 作成 – Fonland などを参考に。

サイドバーの調整

✔ あれタグクラウドって出ないの？

「利用できるウィジェット」から追加するだけ。

✔ サイドバーの新着リストに投稿日時を表示

テンプレートタグ/wp get archives – WordPress Codex 日本語版を参考に。PHP Code Widgetというプラグインを使うと、ウィジェットに直接phpを記述したものを足すことができるので、ウィジェットの中身を下記にします。

XHTML

<?php query_posts(‘showposts=5′); ?> <ul> <?php while (have_posts()) : the_post(); ?> <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a> (<?php the_time(‘y.m.d’) ?>)</li> <?php endwhile;?> </ul>

1 2 3 4 5

<?php query_posts(‘showposts=5′); ?> <ul> <?php while (have_posts()) : the_post(); ?> <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a> (<?php the_time(‘y.m.d’) ?>)</li> <?php endwhile;?> </ul>

✔ 用意されている最新のコメントウィジェットは、「○○の記事に△△さんより」と1つずつ表示されて見にくいので、記事ごとにコメントをまとめたい。

WordPressでコメント一覧を表示するCommented entry listプラグイン: 小粋空間を入れる。で、新着リストと同様にPHPウィジェットを足して以下記述。

XHTML

<ul><?php get_recently_commented(); ?></ul>

1	<ul><?php get_recently_commented(); ?></ul>

✔ サイドバーのカテゴリ一覧に記事件数がない。

ウィジェットの設定で「投稿数を表示」の設定があるんだった。

アーカイブの調整

WordPressテンプレート構成ファイルの優先順位 – 神戸のWeb制作事務所・ノーウェブノーライフにわかりやすく表が作ってありますが、テンプレートには優先順位があって、例えばテンプレートによっては検索のsearch.phpやアーカイブ用のarchive.phpが無いものもあります。無い場合、最終的にはindex.phpが使われます。

なので私のように「アーカイブは全文ではなく抜粋表示にしたい」という場合、もともとそういう記述がしてあるarchive.phpで無い／archive.phpが無い場合は準備する必要があるということっすね。

✔ アーカイブページに「続きを読む」リンクを付けたい。

テンプレートタグ/the excerpt – WordPress Codex 日本語版のこのあたり。「このテンプレートタグ the_excerpt() は、現在の投稿の抜粋を、文末に […]（角括弧＋三点リーダー）をつけて表示します。この三点リーダーは「続きを読む」リンクではありません」。つまりfunction.phpに

XHTML

function new_excerpt_more($post) { return ‘ <a href="’. esc_url( get_permalink() ) . ‘">’ . ‘[続きを読む]‘ . ‘</a>’; } add_filter(‘excerpt_more’, ‘new_excerpt_more’);

1	function new_excerpt_more($post) { return ‘ <a href="’. esc_url( get_permalink() ) . ‘">’ . ‘[続きを読む]‘ . ‘</a>’; } add_filter(‘excerpt_more’, ‘new_excerpt_more’);

を書き加えればいいのだが、「子テーマ」を使っている場合は、変更点のみを記述するようにしないとバッティングしてしまう！という点に注意。ふぇいたるえらーって出ます。WordPressのthe_excerpt()をカスタマイズする: 小粋空間を参考に。

✔ アーカイブページに画像サムネイルを付ける

今回一番やりたかったやつ。記事内の一番最初の画像を取得してサムネイル画像表示 | 簡単ホームページ作成支援-Detaramehpを参考にして、archiveやsearch.phpのエントリ内に

XHTML

<div class="contents"><span class="entryThumb"><img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" width="150" height="auto" /></span><?php the_excerpt(‘(Read the rest of this entry…)’); ?></div>

1	<div class="contents"><span class="entryThumb"><img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" width="150" height="auto" /></span><?php the_excerpt(‘(Read the rest of this entry…)’); ?></div>

子テーマのfunction.phpには

XHTML

//最初の画像取得 function catch_that_image() { global $post, $posts; $first_img = ”; ob_start(); ob_end_clean(); $output = preg_match_all(‘/<img.+src=[\'"]([^\'"]+)[\'"].*>/i’, $post->post_content, $matches); $first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image $first_img = "記事中に画像が無い場合に指定する画像パス"; } return $first_img; }

1 2

//最初の画像取得 function catch_that_image() { global $post, $posts; $first_img = ”; ob_start(); ob_end_clean(); $output = preg_match_all(‘/<img.+src=[\'"]([^\'"]+)[\'"].*>/i’, $post->post_content, $matches); $first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image $first_img = "記事中に画像が無い場合に指定する画像パス"; } return $first_img; }

✔ 管理画面でカテゴリ名とタグのスラッグを英文字に。

これは前回もちょっと書きましたが、URLに日本語を表示させるのがいやなためです。ただし途中で変える場合はGoogleでのリンク切れを防ぐためにサイトマップを再送信してやる必要があるようで。

✔ アーカイブページの表示が、設定-表示設定の「1ページに表示する最大投稿数」を継承しちゃうんだパトラッシュ。そんで、見出しと一緒に「全○件」みたいな抽出結果の数字を出したいんだよね。

ネットdeあくせく。。: wordpress ページ毎に記事の表示数を変更、WordPress の検索結果ページで、検索件数を表示する – monaurallab (モノラルラボ)、検索結果の件数を表示【WPCMS.jp】を参照。showpostsは任意の記事数に。

アーカイブページ（archive.php）<?php while (have_posts()) : the_post(); ?> の前に以下を記述。

XHTML

<?php if (have_posts()) : ?> <?php if (is_year()){ $posts = query_posts($query_string . ‘&showposts=20′); } ?> <?php if (is_month()){ $posts = query_posts($query_string . ‘&showposts=20′); } ?> <?php if (is_tag()){ $posts = query_posts($query_string . ‘&showposts=20′); } ?> <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?> <?php /* If this is a tag archive */ if( is_tag() ) { ?> <h2 class="pageTitle">‘<?php single_tag_title(); ?>’ タグが付けられた記事：全<?php echo $wp_query->found_posts;?>件</h2> <?php /* If this is a daily archive */ } elseif (is_day()) { ?> <h2 class="pageTitle">Entries for <?php the_time(‘F jS, Y’); ?></h2> <?php /* If this is a monthly archive */ } elseif (is_month()) { ?> <h2 class="pageTitle"><?php the_time(‘Y年F’); ?>の記事：全<?php echo $wp_query->found_posts;?>件</h2> <?php /* If this is a yearly archive */ } elseif (is_year()) { ?> <h2 class="pageTitle"><?php the_time(‘Y年’); ?>の記事：全<?php echo $wp_query->found_posts;?>件</h2> <?php } ?>

1 2 3 4 5 6 7 8 9 10 11

<?php if (have_posts()) : ?> <?php if (is_year()){ $posts = query_posts($query_string . ‘&showposts=20′); } ?> <?php if (is_month()){ $posts = query_posts($query_string . ‘&showposts=20′); } ?> <?php if (is_tag()){ $posts = query_posts($query_string . ‘&showposts=20′); } ?> <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?> <?php /* If this is a tag archive */ if( is_tag() ) { ?> <h2 class="pageTitle">‘<?php single_tag_title(); ?>’ タグが付けられた記事：全<?php echo $wp_query->found_posts;?>件</h2> <?php /* If this is a daily archive */ } elseif (is_day()) { ?> <h2 class="pageTitle">Entries for <?php the_time(‘F jS, Y’); ?></h2> <?php /* If this is a monthly archive */ } elseif (is_month()) { ?> <h2 class="pageTitle"><?php the_time(‘Y年F’); ?>の記事：全<?php echo $wp_query->found_posts;?>件</h2> <?php /* If this is a yearly archive */ } elseif (is_year()) { ?> <h2 class="pageTitle"><?php the_time(‘Y年’); ?>の記事：全<?php echo $wp_query->found_posts;?>件</h2> <?php } ?>

✔ 記事日付の形式の変更

テンプレートにある<?php the_time(‘M.d, Y’) ?>を<?php the_time(‘Y年m月d日’) ?>に

✔ 検索に固定ページ（aboutとか）が含まれてしまうのを除外したい。

WordPress：検索結果をカスタマイズする | NxWorld参照。functions.phpに function SearchFilter を追記。

XHTML

function SearchFilter($query) { if ($query->is_search) { $query->set(‘post_type’, ‘post’); } return $query; } add_filter(‘pre_get_posts’,'SearchFilter’);

1	function SearchFilter($query) { if ($query->is_search) { $query->set(‘post_type’, ‘post’); } return $query; } add_filter(‘pre_get_posts’,'SearchFilter’);

✔ っていうか検索結果ページ、記事が全文表示されちゃうよ？

自分が使ったテンプレートにはsearch.phpがなかったのでindex.phpが使われたんですね。本当なら、アーカイブよりは細かく30件ごとの抜粋表示にしたい。なのでWordPressの検索機能をもっと使いやすくする | Webクリエイターボックスを参考にsearch.php作りました。中身の表示方法はarchive.phpと同じにして、

XHTML

<?php if (is_search()){ $posts = query_posts($query_string . ‘&showposts=30′); } ?>

1	<?php if (is_search()){ $posts = query_posts($query_string . ‘&showposts=30′); } ?>

を記述して、無事30件ごとに検索結果が表示できたー(∩´∀｀)∩ﾜｰｲ

✔ 検索結果やカテゴリ検索結果の所で、タグを指定していない記事に「タグ：　　」のような空divを出さないようにするには？

XHTML

<li class="metaDataTags"><?php the_tags(”, ‘, ‘, ”); ?></li>

1	<li class="metaDataTags"><?php the_tags(”, ‘, ‘, ”); ?></li>

これを

XHTML

<?php if (has_tag()) : ?><li class="metaDataTags"><?php the_tags(”, ‘, ‘, ”); ?></li><?php endif; ?>

1	<?php if (has_tag()) : ?><li class="metaDataTags"><?php the_tags(”, ‘, ‘, ”); ?></li><?php endif; ?>

に。でけたーひとりででけたー

✔ ページナビゲーション

結局、もともとテンプレートにページナビゲーションのあるものを選んでしまったので調べたけどやってないんだよな。カスタマイズについてはプラグインを使わないでWordPressにページナビを実装してみる | bl6.jpで完璧です。もしナビゲーション自体の幅が広くてキレてしまうのであれば、function.phpの

XHTML

function simplenotes_pagination($pages = ”, $range = 4){

1	function simplenotes_pagination($pages = ”, $range = 4){

rangeの数を調整すればOK。

その他

✔ コメント欄のタグの非使用については

WordPressの投稿やコメントで使えるタグを追加する | モノについてのモノ語りを参考にしてタグを全部削除し、「次のHTML タグと属性が使えます:」はdisplay: none。

✔ WP Multibyte Patchプラグインは削除しないように

何のタイミングでやっちゃったか覚えてないんですけど、これがないとカテゴリやタグ抽出で全文出るようになっちゃいます。

（注） 日本語のように語句の間を半角スペースで区切らない言語では「55単語」を判定できないため、抜粋できずに本文のほとんどが出力されてしまうことがあります。 WordPress 日本語版では、この問題を含むマルチバイト関連の問題に対処するために WP Multibyte Patch プラグインを同梱しています。このプラグインを使用すると、110文字まで（設定により変更可）を抜粋文として出力できます。（テンプレートタグ/the excerpt – WordPress Codex 日本語版）