Wp テーマ MH Magazines Lite に変更（ほぼ）完了

Wpのテーマ変更が（ほぼ）完了。結局 MH Magazines Lite に落ち着いている。一番の決め手は、トップページメインエリアの構造を、ウィジェットで自由に組み合わせられる点。それからデザインが好みなこと（これが結構大きいかも）。以下、導入＆カスタマイズメモ。

【注】当記事はMH-Magazine Lite 旧バージョン（～1.8）のカスタマイズメモです。このテーマは更新の際CSSのクラス名が変わったり、バージョン2ではPHPファイル名やウィジェット名が変更になっており、当記事内容と整合性のない場合があります（2016/3/9）。

バージョン2で新記事書きました（2016/3/28）。

Like a Magazine ♫ MH Magazine Lite (ver.2) カスタマイズ① -基本編
Like a Magazine ♫ MH Magazine Lite (ver.2) カスタマイズ② +α編
Like a Magazine ♫ MH Magazine Lite (ver.2) カスタマイズ③ ×子テーマ編
➾【参考】アーカイブ/MH Magazine

①アクセス解析でタイムラグを発生させないために、ResearchArtisanLite のタグを footer.php の </body> 直前に埋め込む。PHPコードだとエラーになるので、HTMLコードにした。タイムゾーンは修正なしでOKだった。ついでにコピーライトもここで修正するとよい。

②カスタマイズの前に、ダッシュボードから導入したテーマを（テンプレートだけでも）PCにダウンロードしておく。

③新規固定ページを作成（タイトルはHOMEなど、テンプレートは Homepage を選択）。

④とりあえず以下を参考に、ざっくりとダッシュボード＞外観＞カスタマイズで設定。固定フロントページで、③で作成した HOME を選択する。その後ウィジェットで、トップページやサイドバー＆フッターを設定。 ポータルサイトに最適！ブログにも使えるテーマ「MH Magazines Lite」

⑤phpテンプレートと関連CSSを修正していく。phpはデフォルトを修正し、CSSはプラグインJetpack のカスタムCSS編集に書き込む。

トップページ等の投稿リストには、サムネール画像がない場合、グレーのnoimage画像が表示されてしまうため、loop.php、mh-widgets.php（includeテンプレート）の該当箇所を削除。
記事ページをワンカラムにする。 single.php から、サイドバーの読み込み部分を削除。CSSで content 部分を中央に寄せる。
記事ページのタイトル下アセット表示を修正。 content.php の該当部分から、Posted by などの余分な記述を削除する。
コメント欄の文字修正 comments.php 。

⑥ソーシャルリンクアイコンを設置。プラグイン Social Media Widget を導入し、トップページやアーカイブページには、ウィジェットからソーシャルアイコンをサイドバーに表示させる。記事ページには、まずプラグイン WordPress Visual Icon Fontsを導入し、アイコンを記事ページに作成、そのHTMLコードを single.php のheader下に書き込こみ、CSS編集。

⑦パンくずリストを設置。プラグイン Breadcrumb NavXTにより、トップページやアーカイブページにはウィジェットからサイドバーに設定。記事ページには single.php のheader下に、直接以下のコードを書きこむ。

<div> <?php if(function_exists('bcn_display')) { bcn_display(); }?> </div>

⑧フッターのリスト表示を見やすくするためにCSS修正。またサイドバーのリスト表示には三角矢印の画像をCSSで設定。それに伴う不具合も修正。

➈ヘッダーロゴ画像を作成し、外観＞ヘッダーで設定。

⑩ダッシュボードのビジュアルエディタのフォント修正のため、editor-style.cssファイルを新規に作成し、以下のようにコードを記述、テーマディレクトリにアップ。

body.mceContentBody { フォントファミリー、サイズなど }

functions.phpにタグを追加するよう解説にはあるけれど、（このテーマの場合? あるいはWpの最新バージョンの場合?）不要だった。

⑪子テーマの作成（一番最初に作るのがベストだけれど、どのphpファイルをカスタマイズするのかが不明だったので、後回しにした） themes ディレクトリに、mh-magazine-lite-kid（任意）の名前で新規ディレクトリを作成。別途style.css ファイルを作成し、以下を記述。ここにカスタムCSSで追加編集したタグを転記してアップロードする。

/* Theme Name: mh-magazine-lite-kid（任意） Template: mh-magazine-lite */ @import url('../mh-magazine-lite/style.css');

①⑤⑧で修正、作成したPHPファイルをコピーして mh-magazine-lite-kid ディレクトリにアップする。mh-widgets.php は mh-magazine-lite-kidディレクトリ内にinclude ディレクトリを作成し、その配下に設置すること。外観＞テーマ＞カスタマイズ＞mh-magazine-lite-kid 選択し、有効化、設定調整（ヘッダーロゴ画像は再度選択しなければいけなかった）。

⑫ .loop-title（h3）CSS編集 ➾ カテゴリページまだ若干CSSで修正したい部分はあるけれど、まあこんなかんじでいいかなあと思っている。あとはほんとレスポンシブだけ。でも、iPhone だと記事ページはテキスト表示できるし、それほどこだわらなくてもいいか（訪問者多いわけじゃないし）…。

【追加カスタマイズ-1】～1/25

１）カテゴリを並べ替えるためにプラグインMy Category Orderを導入。フッターカテゴリーを並べ替える。

２）ページトップへ戻るリンクを設置するため、プラグインToTop Linkを導入。画像は新規作成して入れ替える。(1/25 バックを砂漠の砂画像に再度変更）

３）前後の記事へのリンクがデフォルトだと英語表記だし、位置がコメント上部であるのも気に入らなかったので、functions.phpから、/***** Post / Image Navigation *****/の部分を削除。新たに以下のタグをcontens.phpのタグ表記下部に記入。CSS修正。これだと、カテゴリ別の前後の記事が表示される。

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

・WordPressで前後の記事へのリンクを同じカテゴリだけにする

*カテゴリ別表示にすると、非表示や下書きのタイトルは取得できないので、別途「非表示」と「下書き」カテゴリを作成し、該当記事のカテゴリーを変更。

４）ヘッダー画像も少し修正。再度CSSで、テキストサイズと色、引用部分を調整。

５）関連記事 (YARPP)表示修正 ➾ 設定画面から、表示設定ウェブサイト用＞自動表示投稿のチェックをはずし、ウィジェットPost2で記事ページコンテンツ下部に設置しなおす。

６）前後の記事リンクの上部に、ページトップへ戻るリンク、カテゴリアーカイブへのリンク、ホームへのリンクを設置する。

表示させる画像を三つ用意し、子テーマに images ディレクトリを作成しアップしておく

content.php の前後の記事へのナビゲーション上部に、リンク（a href と img src で）コードを追加・ページトップへ戻る ➾ single.php ヘッダー部に <div id=”page-top”></div>を設置し、リンクさせる
（「WordPress」プラグインでできることを、プラグインを使わず実装するテクニック）

カテゴリーアーカイブへのリンク ➾ WordPress のタグとPHPがよくわかっていないため手間取ったけれど、以下のように記述してなんとか設置（検索でもなかなかわかりやすい解説がなくて難儀した。
結局、サイトURL（タグで取得）/category/カテゴリのスラッグ名（タグで取得）と記述し、OKとなった。MTだったらタグ一発なのに、投稿記事のカテゴリのスラッグ名取得に前提条件みたいなコードが必要だった。
・WordPressでカテゴリースラッグを取得する方法）

<ul> <?php $cat = get_the_category(); $cat = $cat[0]; ?> <li><a href="<?php bloginfo('url'); ?>/category/<?php echo $cat->category_nicename; ?>"><img src="/.png" ></a></li>

（・・・このカテゴリパスは、Wpのパーマリンク設定によって変わってくるよね）・HOMEへのリンク ➾ このタグはすぐに設置出来た

<li><a href="<?php bloginfo('url'); ?></a></li> </ul>

７）フッターにもHOMEへのリンク画像を設置 CSS編集【収穫】 :hover で透明度を変えるCSS3を習得できた例えばこう書けばOK。

.top-home-button ul li {  -moz-opacity:.75; filter:alpha(opacity=75); opacity:.75; }  .top-home-button ul li:hover { -moz-opacity:1; filter:alpha(opacity=100); opacity:1; }

全体の雰囲気をもう少し変えたいような気もするけれど（たとえばヘッダー画像をモノクロにして差し色をワインレッドにするとか）、今のも気に入っているので、しばらく（飽きるまで）この状態で置いておこう。

【追加カスタマイズ-2】～1/29

1）全体の強い印象を和らげたくて、CSSでメインナビの色を編集する

2）ロゴ画像に a:hoverでフェードイン/アウトを設定

3）アーカイブページの記事タイトル（thumbnailなし）トップににクリップ画像ボタンを設置

4）トップページに注目記事を「TOP」のタグで表示させる（かなり手こずる）
➾テンプレートキングのトップ表示記事部分を参考にpage.php に直接タグを書き込むが、位置調整がうまくいかず断念。
➾ウィジェット追加を検討するも、functios.php の記述などでエラーになるので断念

★ウィジェットにPHPを書き込めるプラグイン PHP Code Widget を導入。 Home-1のウィジェットに PHP Codeを設置し、以下を記述する。記事が全文表示になってしまうのを、more以下を非表示させるタグがよくわからず、以下を参考になんとかクリア。
・moreタグを有効にするPHPの書き方について

実際には以下のように書き込んでOKとなった。

<div> <?php query_posts('tag=TOP'); ?> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); global $post, $more;?> <?php $more = false; the_content(__('→ 続きを読む')); $more = true; ?> </div> <?php endwhile; ?> <?php endif; ?>

5）スライドショーをもう少し制御したいと思い、プラグインを検討するも、表示させたい画像を選んだりと、ダッシュボードでのもうひと手間が必要になる。テーマのデフォルトでもタグによるフィルタリングで任意の記事を表示させられることがわかったので、現行のまま使うことにする。これだと記事にアイキャッチ画像を設定し、フィルタリング用のタグを入れるだけ。画像サイズは横は最大620pxまで、縦だけは264pxで統一すると画面が動かなくていいと思う。

★ これにて、トップページの見せ方がほぼ希望通りに制御できるようになった。タグ制御ページはタグクラウドや記事下にタグが表示されてしまうけれど（仕方ないね）。あと、不要になったら消すのを忘れないこと。つまり記事投稿時に、常にアイキャッチ画像とタグのことを頭に置いて、トップページの見せ方を考える必要があるということ。

◎プラグインで導入したアイコン、記事中への挿入があまりうまくいかず。

◎プラグイン WP Super Cache の設定でキャッシング利用にチェックを入れていると、カスタマイズの変更が反映されないので、（少なくとも）作業中はチェックをはずす。
・ MH Magazine Lite 英文マニュアル

【今後のためのメモ】

・記事編集に役立つ便利なWPショートコードプラグイン「Arconix Shortcode」
・Web Fontについて
・CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ