Like a Magazine ♫ MH Magazine Lite (ver.2) カスタマイズ③ × 子テーマ編

友人サイトで子テーマ利用をやめてしまったのは、
テーマの（メジャーな）更新で大きくレイアウトが崩れてしまうようなことがあり、
その都度修正するのが面倒になったからである。
子テーマは親テーマの更新の影響を受けず、
従ってカスタマイズにはたいへん適した方法だけれど、
それでも親テーマとの整合性が取れなくなるような更新があれば、
その都度手を入れる必要は出てくる。
なのでサイト管理になるべく手間ひまをかけたくない場合は、
（子テーマでの）テーマファイルは触らないほうがいいのかもしれない。

がしかし、セキュリティ上修正しておいた方がよいテーマファイルもある。

とりあえず子テーマをつくる

その前に、こんなところで高らかにお断りするのもなんだが、私はPHPのことがわかっていない。きちんと勉強する意欲と根気が湧いてこないので（MTは10冊以上マニュアル本を読んだのに、WPはゼロ。自慢じゃないけど）いつまでたっても知識が深まってこない。なので、わけがわからないままトライ&エラーで遊びながら触ってきた一つの結果の、これは一例だということ。

子テーマとは親テーマを下敷きに、修正するファイルのみで構成されたテーマのこと。修正したいファイルを親テーマと同じ名前で設置すれば親テーマが上書きされる（ただしfunctions.php 以外）。必須ファイルは［style.css］のみとされていたが（今もこれだけで作成も可能だが）、推奨されている方法では［functions.php］も必要。
WordPress Codex＞子テーマ

★★大事なこと：作業前にテーマファイルのバックアップを取る。

★できればやったほうが良いこと：PC上にWordpressの作業環境を作り、ローカルで作業確認した後リモートにアップする。

たとえば WebMatrix とか、Instant WordPressとか。~~あとあとおすすめなのはWebMatrixだけれど~~*、とっつきやすいのはInstant WordPressだろうか。個人サイトだし、訪れる人も少ないだろうし、試行錯誤が丸見えでも画面が真っ白になっても、「まあいいか…」と構えていられる場合は不要（ずっと私もこれだった）。
ローカルにWP環境/バックアップにも — InstantWP
Windows上でゼロからPHPサイトを作る！ PHPユーザのためのMicrosoft WebMatrix入門

*マイクロソフトは 2017年11月をもってWebMatrixのサポートを終了すると発表した。17年3月現在、公式ページでもダウンロードできない。

子テーマのディレクトリと必須ファイル

まずFTPでサーバーにアクセスし、/wp-content/themes/に子テーマのディレクトリを任意の名前で作成する。例えば、/wp-content/themes/mh-magazine-lite-kid のように。そこにまずは［style.css］をアップする。

新規に作成しても良いが、FTPで親テーマからダウンロードしたものを子テーマにアップし、WordPressで編集するのが楽である。外観＞テーマの編集＞編集するテーマを選択＞で子テーマを選択して作業する。CSSの場合、親テーマのCSSは別途読み込むので全て削除し、以下の内容を書き込む（テンプレート情報を詳しく記述することもできる）。

/*
Theme Name: mh-magazine-lite-kid
Template: mh-magazine-lite
*/

親テーマのスタイルシートの読み込みは、以前はここに@import: を記述していた。が、今は［functions.php］にこう書くのが良いらしい。親テーマからコピペした場合、全てのコードを削除してから、追加修正するコードのみを書き込んでいく。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

functions.php は扱いの難しいファイルだとされている。不要な空白行や全角スペースなどが入るとページが真っ白になって心臓にたいへん悪い（経験あり）。しかも他のファイルと違って上書きされない（親テーマのfunctionを上書き修正することが出来ない）。他のファイルのように親テーマの内容をそのままコピペして重複記述するとエラーになる。

この状態で外観＞テーマ＞を見ると、mh-magazine-lite-kid というテーマが追加されている（はず）。画像なしの地味なやつ。これを有効化する。すると、外観＞テーマの編集＞でもmh-magazine-lite-kid が選択されており、これまた地味な［style.css］が表示されている（はず）。Like a magazine ♫ ② のカスタマイズでcssを［CSS編集］に追記したものをここにコピペし、プラグインを一つ外すのもよい。

セキュリティ上修正推奨ファイル

多くの人はレイアウト上のカスタマイズや機能の追加で子テーマにトライし始めるのだと思う。私がそうであったように。が、冒頭に述べたようにテーマ更新時に最低の手間で済ませたい場合は、なるべく修正ファイルを増やさないほうがいい。まずは不正ログインをふせぐためのテーマ修正だけをそろりと行ってみる。

functions.php

WordPressでは、URLの最後に?author=1をいれるとユーザー名が解ってしまう。これを表示させないコードを上記のコードの下（？＞の上）に以下のように追加する。

//投稿者アーカイブを空欄化
add_filter( 'author_rewrite_rules', '__return_empty_array' );
//URLを非表示化
function disable_author_archive() {
    if( $_GET['author'] || preg_match('#/author/.+#', $_SERVER['REQUEST_URI']) ){
        wp_redirect( home_url( '/404.php' ) );
        exit;
    }
}
add_action('init', 'disable_author_archive');

ログインユーザー名は、実はさらりと別の部分でもわかってしまう。デフォルトでは投稿記事のタイトル下などのメタ情報に投稿日と並んで投稿者名が表示される。ユーザー名にニックネームを設定していればニックネームになる。

ここをクリックしても上記設定により404Notfoundが返ってくるだけである。が、マウスオンで表示されるリンクURLには、ニックネームではないユーザー名が表示されてしまうのだ。もし投稿者が一人の場合、投稿者名が表示されないようにするのがベターだろう。

この部分は＞includes/mh-custom-functions.php に書かれているのだが、そのファンクションを読み込んでいるコードを、以下のファイルで修正していく。もしメタ情報の全てが非表示でかまわない場合は、読み込む一行を削除するだけで差し替える必要は無い。が、個人的には少なくとも投稿日時は表示するべきだと思っている。その記事がいつ書かれたのかというのは、読み手には大事な情報だもの。

content-loop.php

index/archive/searchページのサムネール、タイトル、メタ情報、概要を制御するファイル。以下の一行を削除。

<?php mh_magazine_lite_loop_meta(); ?>

以下に差し替える。

<span class="mh-meta-date updated"><i class="fa fa-clock-o"></i><?php $date = get_the_date(); echo $date; ?></span> <span class="mh-meta-comments"><i class="fa fa-comment-o"></i>
<?php mh_magazine_lite_comment_count(); ?></span>

content-single.php

投稿記事ページを制御するファイル。以下の一行を削除。

<?php mh_post_header(); ?>

以下に差し替える。

<p class="mh-meta entry-meta">
<span class="mh-meta-date updated"><i class="fa fa-clock-o"></i><?php $date = get_the_date(); echo $date; ?></span>
<span class="entry-meta-categories"><i class="fa fa-folder-open-o"></i>
<?php the_category(', '); ?></span>
<span class="mh-meta-comments"><i class="fa fa-comment-o"></i>
<?php mh_magazine_lite_comment_count(); ?></span></p>

ちょっと気になるあれとこれ

footer.php

editor-style.css

WordPressの投稿編集エディター、ビジュアルでもフォントが明朝である。この部分をサイトと同じようにしたい。せめてbody のフォントだけでも揃えたい。と最初からあれこれ苦労したが、このテーマではeditor-style.css（これだけは新規作成する）を子テーマに置けばOK。私の場合、Bodyのフォント以外、見出し部分のCSSを追記している程度だけれど。

body の部分はこんな感じになる。

body.mceContentBody {
 font-family: "Lucida Grande", "Lucida Sans Unicode", arial, Verdana, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif, 'Open Sans', Helvetica;
 font-size: 16px;
 line-height: 1.6;
}

プラグインをへらす

便利だからと知らぬ間に増えてしまうのがプラグインである。プラグイン同士でバッティングもするし、多いと軽快さも損なわれる。プラグインで導入した機能を子テーマに直書きすれば、プラグイン数を減らすことができる。CSS名や内容は任意で（新たに設定する）。以下のプラグインは Like a Magazine ♫ ②で導入したもの。

single.php — Breadcrumb NavXT

パンくずリストを表示させるこのプラグインでは、生成したコードをheader.phpなどに転記する必要があった。せっかく子テーマを作ったのだから、少なくともこのコードを書きこんだファイルは子テーマにコピペで持ってきておくのが良い。が、どうせなら直書きして、プラグインをやめるというのも手である。

当サイトでは投稿記事だけにパンくずリストを表示させている。この場合 single.php の<?php get_header(); ?>の下に以下のようなコードを追加*する。

<div class="breadcrumbs">
<a href="<?php bloginfo('url'); ?>">TOP</a>&nbsp;>&nbsp; 
<?php $cat = get_the_category(); echo get_category_parents($cat[0], true, '&nbsp;>&nbsp;'); ?> 
<?php the_title(''); ?>
</div>

*上記コードが画像URLページでエラーになるので別のコードで検証中（2016.4.15）

single.php（ウィジェット［テキスト］）– Social Media Widget

当サイトでは Twitter、RSS、Feedly の三つのボタンをサイドバーと記事ページの右上に設置している。記事ページに表示させているのはサイドバーをはずしてしまったからで、通常はサイドバーだけでいい。その場合は single.php の修正は不要で、以下のHTMLコードをウィジェットの［テキスト］に書き込むだけ。

例としてTwitterだけを挙げておく。あ、そうだ、まずどこかからSNSボタンの画像をゲットして来なければいけない（フリー素材に山ほどあるのでお好きなやつを）。ルート（あるいは子テーマの）ディレクトリなどにimagesというディレクトリを作り、その画像をFTPで放り込んでおく。

<div class="socialmedia-buttons">
    <a target="_blank" rel="nofollow" href="https://twitter.com/ユーザー名">
        <img class="scale" width="32" height="32" title="Follow Me on Twitter" alt="Follow Me on Twitter" src="http://サイトドメイン/images/twitter.png"></img>
    </a>
</div>

その他のSNSボタンではリンク先のURLと画像名を変えるだけである。ちなみに…

RSS：http://サイトURL/feed/
Feedly：http://feedly.com/i/subscription/feed/サイトURL/feed/

補：SNSボタンに画像ではなくアイコンフォントを使う方法を Like a Magazine ♫ ② に追記した。