仕事サイトで使っているMH Magazine（有料版）が3.8.1となった。有料版は一つのドメインでしか使えないと思い込んでいたのだが、49ドルの最低プラン（Starter）でも5ドメインまで利用できるとのこと。
ちなみに79ドルのProfessionalだとMH Themsのすべてのテーマがドメイン数制限なしで使える。複数のテーマを利用したい、あるいは新しく出るテーマに変えていきたい、という場合は最初からProfessionalがいい。
それで、長らくMH Magazine Liteをしこしこカスタマイズしてきた愛着はあれど、この際Liteなしに脱皮してみることにした。以下、手順その他メモ。基本的にLite版でのカスタマイズを移し替えればいいのだが、構造がより複雑なのでそのままとはいかず、試行錯誤。ゼロからカスタマイズするよりはましだけれど。
Documentation: MH Magazine WordPress Theme
ローカル作業
１．Instant WordPress（ダウンロード設定済み） でローカル環境を作る
1）MH Magazineの最新版をダウンロードし、適用。サーバーからLite 版のDBをインポート
2）メニュー、ウィジェットを揃える
3）PHPのバージョンが古いため、以下の二つプラグインは有効化できず、古いバージョンに戻す
Featured Image From URL WordPress Related Posts
※Featured Image…は、1.5.4で「Bug fix: compatibility with old PHP versions.』とあるので、もしかしたら有効化できるようになっているかもしれない。
4）外観＞テーマ＞Theme options からかなりのカスタマイズが可能となった。
増えた機能でプラグインや子テーマのPHP記述の削減が可能。
以下は利用しない（Disable）機能
・Layout – General＞
Back to Top Button（プラグイン Go to Top 削除）
・Layout – Posts/Pages ＞
Breadcrumb Navigation（パンくずリスト ）
⇒ 表示が少しうるさいのでこれまで通り子テーマで設定
Featured Image on Posts
⇒記事ページアイキャッチは＜a＞タグでFlickrから読み込ませる
Link Featured Image to Attachment
Social Buttons on Posts
⇒テーマデフォルトだとCSSが崩れている、［はてB！］がない
⇒⇒これまで通りテーマファイルじか書き
Related Articles
⇒プラグイン WordPress Related Postsを引き続き利用
サムネール画像なしの記事にもランダムで画像が出る等、設定機能が高いため
Post/Attachment Navigation（前後の記事へのリンク画像つき）
⇒ 外部サムネールはリサイズされずに表示されてしまうため
ON/OFFに注意！（Enable/Disable)
・Layout – Post Meta ではDateのみON。（HOMEの記事タイトル下にメタ情報を表示させる。アーカイブページと記事ページのメタ情報は別途phpファイルで制御。）
・Typofgaphy でbodyとタイトルにGoogleWebFontが使えるようになったが、当サイトで利用中のフォントはリストにないので使えない。
5）子テーマを作成し、functions.php、editor-style.css、style.css、comments.php、content-list.php、content-single.php、footer.php、header.php、single.php をコピーしておく（Liteでは14個もカスタマイズしていたのだが、9個に減った）。
⇒ functions.phpは二重読み込みができないので不要な部分（php開始タグ閉じタグ以外）は削除しておく。
⇒ style.cssにはLiteで修正したstyle.cssの中身をコピー、及びカスタムCSSも追加内容をLiteからコピー
⇒⇒CSSは微妙に崩れる箇所あり（独自に設定したSNSボタン）。
特にウィジェットの［テキスト］のCSSで、リストが横並びにならない。
テーブルに入れたり、 .textwidget img プロパティのfloat：left を無しにするなどして調整。
２．フロントページトップの一番上の［Selections］を自作
これまでプラグインでカルーセル×6記事を表示させていたが、このプラグインは外部からのサムネールが表示されない。そのためせっかくFeature Image from URLを使っていても、ここの記事には内部画像が必要で、不要な作業及び画像が発生していた。これを回避させるため。カルーセルはあきらめて固定表示（3記事）とする。
1）List Category Posts の Templatesからdefault.phpを selection.phpにリネーム。これを、テーマ（子テーマ）内に作成したフォルダ（ディレクトリ） list-category-postsにコピー（アップ）。
Virtue：アイキャッチ画像を外部から取得する を参考に（思い出しながら）、タイトルとサムネール、日付の位置を入れ替える。
2）ウィジェットのHome1に［テキスト］で以下のタグを（半角［］で囲って）記入。
catlist numberposts=’3′ date=’yes’ excerpt=’yes’ thumbnail=’yes’ thumbnail_size=316,237 tags=”slide” catlist template=’selection
3）Wp Posts Carousel のレイアウトを参考にCSSを設定。
３．子テーマでテーマファイルを修正
・footer.php
1）Liteと違ってThemeOptionsでコピーライトは入れられるようになったが、年号など細かな設定はできないので、やはり修正は必要。以下の一行を削除。
<?php mh_magazine_copyright_notice(); ?>
年号や©記号などを書き込む。
Copyright © 2011-<?php echo date('Y '); bloginfo('name'); ?>
2）その他スクリプトを＜/body＞の直前に書き込む。
※Reserch Artisan（を利用している場合）用のスクリプト、モリサワフォント（Typesquare）は、サーバーにアップデートしてから書き込むこと）
※モリサワフォントはwpXサーバーで無料で1サイト利用できるようになったので、そちらを利用するほうが良いかも
3）.mh-footer を .mh-container の外に出すため、フッターウィジェットを読み込む直前（二行目）で＜/div＞を挿入し、閉じる。
4）タイトルフォント、タイトルボーダーをThemeOptionsの＜色で修正
.functions.php
親テーマからのCSS読み込み用コード、及びユーザー情報非表示用コードを、＜？php と、？＞の間に記載
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
function custom_editor_settings( $initArray ){
$initArray['body_class'] = 'editor-area';
return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );
//URLを非表示化
add_filter( 'author_rewrite_rules', '__return_empty_array' );
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');
※続けてパンくずリスト用のコードも挿入しておく（参照：パンくずリスト修正他 メモ）
・comment.php
英語を日本語表記に修正
Be the first to comment ⇒ コメント
Leave a Reply ⇒ 削除
Your email address will not be published. ⇒ メールアドレスが公開されることはありません。* は必須項目です。
・single.php ワンカラム化
1）パンくずリスト設置/参考：パンくずリスト修正他 メモ
2）サイドバー、セカンドサイドバーのコード削除
3）mh-wrapper ⇒ single-wrapper で囲む
4）CSS調整 モバイル用も
・content-single.php
1）タグ下にソーシャルボタン設置
2）to top, to category, to home ボタン設置
3）wp_related_posts タグ設置
4）カテゴリ別前後の記事へのリンク設置
WordPressで記事前後のリンクを同じカテゴリに絞ってリンクする方法
※ dynamic_sidebar(‘mh-posts-1’) と、dynamic_sidebar(‘mh-posts-2’) のphpタグをそれぞれで閉じてから、その間に上記1～4のコードを挿入する
5）記事タイトル下のメタ情報は、includes/mh-custom-functions.php で制御している。そちらでの修正がうまくいかなかったため、content-single.phpにじか書きすることにする。まずは mh_post_header(); を削除し、（更新日を表示させるコードを追加した）以下のコードを</header>の直前に記入。コメント情報は何故かはエラーになるので書き込まず。
<p class="mh-meta entry-meta"><span class="mh-meta-date updated"><i class="fa fa-clock-o"></i>
<?php the_time('Y/m/d'); ?>
<?php if (get_the_modified_date('Y/m/d') != get_the_time('Y/m/d')) : ?>
｜更新:<?php the_modified_date('Y/m/d') ?>
<?php endif; ?></span>
<span class="entry-meta-categories"><i class="fa fa-folder-open-o"></i>
<?php the_category(', '); ?></span>
</p>
・content-list.php
カテゴリ（アーカイブページ）画像の上にカテゴリ名が重なって出るのがうるさいので以下を削除
<?php if (has_category()) { ?>
<?php if (has_category()) { ?> <div class="mh-image-caption mh-posts-list-caption">
<?php $category = get_the_category(); echo esc_attr($category[0]->cat_name); ?>
</div><?php } ?>
NO Image の画像を子テーマから取得させるために get_template_directory_uri() をget_stylesheet_directory_uri() に変更（5×53ピクセルに修正した画像をアップしておく）
メタ情報を content-single.phpと同様に</header>直前に記入（カテゴリ部分はカット）
サーバーにアップ後のリモート作業
１．ウィジェット・Thema Options 設定
ウィジェットとThemaOptions、WPやプラグインの［設定］調整作業は、サーバー上でもう一度繰り返し行うしかない。ウィジェットが多いので面倒だが、それがこのテーマのウリなので仕方がない。どうせアクセスもそれほど多くないのだがらとHOMEトップに［テーマメンテナンス中！］と出しておいてそのまま作業してしまう。
ただ、Selections としてHOME 1（Full width）に［テキスト］でList Category Posts で作ったショートコードを記入しても、ローカルと同じようにCSSが効かず、表示が崩れてしまう。この部分は他のウィジェットを全て設置してから検証することにして、いったん外す。
２．CSS調整
ローカルのままでは効かないCSSが一部あり。親となるクラスをしっかり指定しなおす。Selections用（List Category Posts）のショートコードは固定ページで検証し、CSSその他を見直してからウィジェットに再記入。
※CSSの反映チェックには wpXサーバー管理画面で mod_pagespeed設定をOFFにしておくこと
３．テーマファイル
・footer.php：Reserch Artisan 用のコードを記入（Lite版からは削除）
・selection.php：概要のクラスをpからdivに変更し、不要なコードを削除
４．不要なものを捨てる
1）不要となったプラグインを削除
・Go to Top
・Wp Posts Carousel
・無効化していたいくつかのプラグインも削除（WP Mail SMTP など）
2）不要なCSSコードを削除（カルーセルやFocus部分など）
3）メディアライブラリから不要な画像を削除
4）記事から不要な画像を削除
５．速度チェック⇒高速化
基本的に（ヘッダー以外）画像を外部から読み込むことにしてしまったため、GT Metrixの速度ランクが落ちてしまった。PageSpeed InsightsとYSlowがD＆Dで60％台である。特にHOMEのサムネールがCSSでリサイズとなり（メディアライブラリにそのサイズの画像がないため）足をひっぱっている。この部分は検討課題として、まずは出来ることをやった。
・Leverage browser caching：.htaccess＞ifModule mod_expires.c でキャッシュ時間を見直し
・プラグイン Autoptimize 導入（CSSとJavaScript コードを圧縮）
⇒ヘッダー画像左上に［No theme CSS loaded］と出るようになった
⇒⇒設定でCSSオプションのチェックをはずす
・footer.phpに書き込んでいた古いIE関連のscriptを削除、他の scriptには async 属性を付与（scriptの記述をHTML5に書き換え）
参考 HTML5のscript要素でasync, deferを使ってパフォーマンスアップ
これで、PageSpeedがD(67％） Serve scaled images 以外ではB項目が2、残りは全てA、YSlow ScoreはC(76%)となった。ただし、個別ページではA（93％）＆C（77％）とそれなりの速度なので、これでいいか、とも思う。いきなりHOMEに来る人はそういないだろうし。
ただし、アーカイブ（カテゴリ）はサムネールのせいでB＆Cとなる。できればサムネールとして取得する画像は150×150などに統一するといいんだろうな。でもカテゴリページだってあまり来る人いないよね。
速度については、実はテーマ有料版に少し期待もしていた。最新バージョンで表示速度がさらにアップしたと謳っていたので。でもまあこんなもんかな。というか、ランクはともあれ、体感速度は若干速くなった（ような気がする）。
・fubctions.phpにサムネール画像取得コード（Image Sizes）を追記し、サムネール項目を削除、一部は数値を0,0とする。
⇒これで記事トップに外部からアイキャッチを読み込んだ場合の自動生成画像が、オリジナルと150×150のみ生成されるようになった。
※何故かHOMEのサムネール画像small（デフォルト 80×60）を150×150で挿入した場合、GTMetrixでマイナス評価とならない。こことあと235×176をサイズ修正したらA(92%）＆C（76％）、3.7s/0.97MB/53Requestとなった。
※項目では Specify image dimensions が、相変わらず「画像サイズを指定しろ」と表示画像をリストアップしてくれてはいるものの、ランクはA（97％）なので良しとする。
６．最終作業・検討課題
1）テンプレートファイルのサムネール画像部分のチェック
・カテゴリアーカイブぺージ：content-list.php＞サムネールなし画像のタグを修正（ローカルで対応済み）、子テーマ＞imagesに、同名で5×53ピクセルの画像をアップしておくこと
・HOMEのNo Image用の画像はテーマ＞includes＞widgets＞mh-custom-posts.phpで設定している。深い階層の子テーマ化が相変わらず分からずで、とりあえず テーマ＞images＞placeholder-small.pngそのものを5×53ピクセルの画像に置き換えておく
2）記事の画像チェック
3）Flickrから利用する記事トップのアイキャッチ画像とサムネールのルール
・アイキャッチ
Thema Options ＞＞Featured Image on Posts：OFF
⇒ 必要な場合はFlickrから500px前後の画像を＜a＞タグで挿入
・サムネール/HOME px
大1：Focus（1記事分） → 678×380(～)
⇒リサイズされるのだが、GTMetrixでは問題なし。640×480などでも良いのかも
大2：Selections（3）→ 440×330以上
⇒リサイズされる幅316でアップするとタブレット＆スマホ表示に若干問題あり
中1：→ 327×245
中2：Pensare （1）→ 235×176（面倒な場合は中1）
小：上記以外 → 150×150
⇒ HOMEでは80×80にリサイズされ、カテゴリアーカイブは150×150のまま
・記事に外部から画像を読み込んだ場合、現サイズと150×150がメディアライブラリに自動生成されるが、これらは実際には利用されていないため削除する
4）タイトルに利用しているモリサワのWebフォントをTypesqereからwpXサーバーでの設定に変更
⇒ 許容ページビューがこれまでの2.5倍 ＆ 複数のフォントが使えるなどメリットが大きい
・サーバー管理画面で設定ドメインを選択し、［HTMLで利用する］マニュアルに従いscriptを記述
⇒ 推奨の heder内でなく、footer.phpの＜/body＞前でも問題なかった。ただし、async属性付与だとChromeでページそのものが表示されなくなったので、マニュアル通りの記述とする。CSSはそのままでOK。
・h4、h6もモリサワフォントに変更
5）サーバーで修正した子テーマのファイルをInstant WPにダウンロード（バックアップ）
カスタムCSSをコピペ（子テーマのCSSに移動しておくほうが良いのだろうが）
コメント