MH-Magazine-Lite 2.0.5 アップデート～カスタマイズ

しばらく見ないふりをしていたテーマの更新。
プラグインとWPを更新してもテーマだけは手つかず。
というのも、バージョンが2となったからには、
いつにもまして大きな変更があるだろうし、
となるとチェック＆修正がかなり手間だと予測されたから。
数日前に意を決して取り掛かり、このたびほぼ完了したんだけれど、
予想以上に時間がかかってしまった。

何が大変だったかというと、子テーマに追記・修正するCSSが何故か反映されず、しばらくじたばたしたこと。テーマのカスタマイズはWebMatrix上で行った。これだとリモートに影響を与えずに思う存分試行錯誤（や失敗）が出来るので、大きく手を入れる前提条件としては必須であった。加えて、Azureの無料お試し30日間を（再度別アカウントで）申し込み、連携テストも行った。

昨年12月にExpressWebから残り半年の契約期間満了を持ってサービスを終了する、とのメールが届き、これまた見ないふりをしていたんだけれど、引っ越し先を検討しなければならず、選択肢のひとつはやはりAzureだろうというのが（再度）浮上してきたからだ。この度は大きなトラブルもつまづきもなく、ローカルからも順調に発行出来ている。

子テーマテンプレート修正

いくつかのテンプレートが分割されたり名前が変わったりしている。以下、子テーマのテンプレートで1.9.2を破棄し2.0.5からコピー、修正したもの。

1.　header.php

webフォント(Googleフォント）のリンクを追加

2.　content-header.php（今回増えた上記header.phpに読みこませている）

ページトップへ戻るためのリンクを追加

3.　footer.php

copyright部分を修正タイプスクエアのWebフォントスクリプト、IE対策スクリプト等追記

4.　content-loop.php（旧loop.php）

カテゴリ別インデックスページでアイキャッチ画像なしの記事にサムネールのグレー画像が出ないように以下のコードを削除 7行目あたりから（代わりのクリップ画像はCSSで指定）

 else {
echo '<img class="mh-image-placeholder" src="' . get_template_directory_uri() . '/images/placeholder-medium.png' . '" alt="No Picture" />';
}

5.　single.php

投稿記事ページの上部にパンくずリストとSNSボタンを設置ちなみにパンくずリストはこんなかんじ

<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>

SNSボタンはボタン画像をアップし、その画像を挿入し、各SNSサイトへのリンクを設置するHTML（<a href></a>と＜img src></img>）を直書きしただけ。

サイドバーなしのワンカラムにするため、サイドバー読み込みの以下phpコードを削除

<?php get_sidebar(); ?>

6.　content-single.php（旧content.php）

single.php に読み込ませているファイル、投稿ページの内容はここで指定ウィジェットのpost2<?php dynamic_sidebar(‘posts-2’); ?>の直前に以下を追記

・SNSのカウンターつきボタン
・トップへ戻るリンクボタン、カテゴリインデックスへ飛ぶリンクボタン、HOMEへ戻るボタンを設置（それぞれのボタン画像にリンクを設定）
・プラグインWordPress Related Posts 用のタグを設置 <?php wp_related_posts()?>
・カテゴリ別前後の記事へのリンクを以下のように設置

<nav class="section-title clearfix" role="navigation">
<div class="post-nav-left">
<?php previous_post_link('← %link', '%title', TRUE, ''); ?>
</div>
<div class="post-nav-right">
<?php next_post_link('%link →', '%title', TRUE, ''); ?>
</div>
</nav>

7.　comments.php

前回のままで問題なさそうなので触らずにいたが、しばらくして書き入れてくれたコメント本文が表示されていないことに気付く。更新テーマのファイルをコピペして入れ替え、新たに英文（Leave a Reply と、Your email address…）を日本文に修正。（2/10）

「Be the first to comment」は要らないので削除。 comment.phpトップにh4でコメントというタイトルを追加。（2/15）

触らなかった子テーマのファイルは以下・functions.php ・editor-style.css ・wpp.css ※日付による前後の記事へのリンクはそのまま（どこで削除するんだっけ？でもまああってもいいし…）

CSS修正

子テーマのstyle.cssが何故かうまく反映されず。ローカルのWebMatrixではJetpackのCustom CSSも使えないためプラグインSimple Custom CSSを導入する。インストールして有効化➾外観＞Custom CSSにスタイルを追加。

（注/私へ：この変更、リモートにはDBを発行しないと反映されない。現行ExpressWebにはWebMatrixからDB発行がうまくいかないので、JetpackのCustomCSSにコピペすること！）更新でCSSセレクタのクラス名が変更された部分の設定しなおし。

1.　ヘッダー画像/WebMatrixからDBを発行するとデフォルトに戻ってしまうため、ヘッダー画像はCSSで読み込ませるように（再）設定、デフォルトの横幅が広がったので元画像も修正（透過の指定も忘れずに）

.mh-site-logo{padding:0!important;-moz-opacity:.8;filter:alpha(opacity=80);opacity:.8} .mh-site-logo:hover{-moz-opacity:1;filter:alpha(opacity=100);opacity:1}

2.　h4.mh-widget-title 赤のアンダーラインを消し、クレヨン線の画像を読み込ませる　.page-header にも

3.　スライダー部分、サムネール画像のmax-height,max-widthや遷移ボタンなどを修正

4. 　今回ウィジェットも名前が若干変わった。カテゴリー別タイトルを取得させていたMH Custom PostsがHOME（フロントページ）のトップ部分（Home2-2/3 Width)では二列にならず、文字その他と併せてCSSで修正。また、アイキャッチ画像なしのサムネールグレー画像を▸画像に修正

5.　フッターも文字サイズやボーダーなど若干修正

6.　タグクラウド色他修正（記事ページ下部も）

7.　カテゴリー別等インデックスページのサムネール画像を削除したので、代わりにタイトルにクリップ画像を指定（サムネールがある場合、クリップ画像の上にサムネール画像が乗るので隠れる）

8.　記事ページの全体を中央寄せにする（なかなかうまくいかず）

#main-contentを.center divクラスで囲み、以下の設定でなんとかクリア（なぜ前回までOKのmargin：0 auto；がダメなのか不明のまま…）

.center #main-content { margin: 0 15% 0 15% !important; width: 70% !important; }

9.　記事ページトップのサムネール画像が不必要に拡大されないように修正

.entry-thumbnail img { width: auto; height: auto; max-width: 750px; min-width: 400px; }

10.　プラグインSlickr Flickr ギャラリー表示のボーダーを消し、パディングなど調整

と、細部までメモれないけれど、おおかたこんなところだろうか…。で、Azure、問題はコスト（と重さ？）。アクセスがあるのはありがたいけれど、それによって従量課金されるというのがね、道楽ブログだし。いっそWordPress専用レンタルサーバーというのも（月500円とかあるし）いいかも。

追記

2016.1.31

最後の検証としてAzureからWebMatrixローカルにダウンロードしてみた。 DBダウンロードできず。 WMに別サイトを作ってもやはりDBがダウンロードできず。相変わらずこれがネックなんだなあ…。ということでWebMatrixローカルサイトがおかしくなってしまった。画像が表示されず。メディアだけをインポートしようとしても失敗！

2016.02.03

あっというまに2.1.0が出たので、引き続き更新した。フロントページのカテゴリ別記事タイトルのサムネール画像、いつものようになしの場合のイメージを三角矢印画像に（同じ名前にして）差し替え。

この部分、テンプレート、親テーマ＞includes＞widgets＞mh-custom-posts.php とさらに一段階層が深くなっている。また、ノーイメージ用の画像名も変わった。管理画面のテンプレート編集では、widgets内のファイルはリストアップすらされていない。

気になっていること

1）検索枠の横、送信赤ボタン

2.1.0 にしたら検索枠の右に赤いボタンが出るようになった。このボタン、送信ボタンで、コメントの「送信」、コンタクトフォームの「送信」と同じ仕様なのだと思う。が、ここに「送信」（もしくはsubmit等）の文字が無い。ただしこれも、WebMatrix（ローカル）、Azure（リモート）では1.0.5 と同じ枠幅100％ボタン無しのまま。

⇒CSSで画像を読み込ませるように設定

fieldset input[type=”submit”] { padding: 5px 15px; background-image: url(“https://provaiciao.jp/images/kensaku.png”); } fieldset input[type=”submit”]:hover { background-image: url(“https://provaiciao.jp/images/kensaku-h.png”); }

が、わけのわからんことを発見。この検索部分の設定はsearchform.php（新規）で行っているというのはわかったのだが、WebMatrixのテーマ最新版にはそもそもこのファイルが無い。突き合せてみたら他にも5個のファイルが無い！！？？無いファイル名は以下（➾旧バージョンのものが残っていた模様。その後問題は解消）。

searchform.php author.php content.php mh-options.php loop.php

2）タグクラウドのリンク数（フロントページ）

以前はタグクラウドのリンク文字の大きさが、該当数に応じて大小に差異化されていたのだが、全て同じ大きさとなった（色とサイズはCSSで修正）。この部分、WxpressWeb上では全てのタグが表示されているのだが、WebMatrix・Azureでは半分ほどの数しか表示されない。これも人気の投稿数と同じくアクセス数で変動するのだと思うけれど、表示数の上限は変更できないのだろうか？（大した問題ではないが）

3）CSSの整理

クラス名が変更になって新規に指定しなおしたりしているので、不要になった記述が残っている。できれば消したほうがいいんだろうけれど…。

更新の際忘れないようにやること

1）フロントページサムネールのノーイメージ画像の差し替え 2）ResearchArtisan用のタグをフッター</body>直前に記入（WebMatrix・Azureには未記入） 3）WPの更新時、wp-setting.php のタイムゾーンをUTCからJTCに修正（52行目）