MH Magazine Lite テーマカスタマイズメモ（～バージョン1.**）

1.ダッシュボードからの基本的なカスタマイズ
2.プラグインによるカスタマイズ
3.テンプレートによるカスタマイズ
4.CSSによるカスタマイズ
5.追記 2014.8.27,2015.5.17/テーマ更新

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

1．ダッシュボードからの基本的なカスタマイズ

・外観＞カスタマイズ サイドバーカラムの位置、メニューで作成したナビゲーションの選択、フロントページ選択、など。

・外観＞ヘッダー ヘッダーロゴ画像（幅980px）を作成し、アップロード

・外観＞メニュー カテゴリーなど表示させる項目を調整

・新規にフロントページ用の固定ページ（HOME *名前は任意）を作成、テンプレートにHomepageを設定

・外観＞ウィジェット ・フロントページ用にHome 1~Home 5 を設定（トップページのみに提供される。サイドバー部分は Home5で行う）

・サイドバーウィジェットを設定（アーカイブページ、投稿記事ページ、固定記事ページのサイドバー）

・記事投稿ページの記事コンテンツの下に Posts2 を設定

・フッターを設定（すべてのページに共通）

・Footer4にテキストウィジェットでロゴ画像を設置、HOMEへとリンクさせる。RSS、月齢も設置。

2．プラグインによるカスタマイズ（５）

WordPress Visual Icon Fonts（新規）

アイコンを好きな場所に挿入できるプラグイン。投稿記事ページのヘッダー下右にツィッター、RSSのアイコンとリンクを表示させる（single.phpにコード追加+CSS編集）（➾その後画像読み込み+リンクのHTMLタグを直書き、プラグインは削除）

Breadcrumb NavXT（インストール済み）

投稿記事ページのヘッダー下左にパンくずリストを設置（single.phpにコード追加+CSS編集）（➾その後リンクHTMLタグを直書き、プラグインは削除）

ToTop Link（新規）

トップへ戻るボタンを設置（プラグインディレクトのimageの画像変更+CSS編集）➾ カスタム画像をアップし、プラグインの設定でURLを指定

My Category Order（新規）

フッターカテゴリ表示を任意の順番にする

PHP Code Widget（新規）

（➾その後コード内容を変更。➾更に別の方法に切り替え/2016.3.15） ウィジェットに任意のPHPコードを追加できるようにする ➾ フロントページのウィジェットHome1に New Featuredを作成、TOPとタグ付けされた記事のサムネール画像、タイトル、more以前の文章を表示させる（ウィジェットに直接以下のPHPタグを追加+CSS編集）

<!-- トップ注目記事 -->
<div>
<?php query_posts('tag=TOP'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); 
    global $post, $more;?>    
        <div>
            <a href="<?php the_permalink(); ?>">
                <?php if (has_post_thumbnail()) { the_post_thumbnail('loop'); } ?>
            </a>
                </div>
            <h3><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h3>
            <p><a href="<?php the_permalink()?>" rel="bookmark"><?php $date = get_the_date(); echo $date; ?></a> // <?php comments_number(__('0 Comments', 'mh'), __('1 Comment', 'mh'), __('% Comments', 'mh')); ?></p>
    <?php $more = false; the_content(__('→ 続きを読む')); $more = true; ?>
</div>
<?php endwhile; ?>
<?php endif; ?>

3．テンプレートによるカスタマイズ（親テーマ1、子テーマ6/headerとhomepage は未修正）

•  子テーマをthemeディレクトリに作成 style.cssをアップ　親テーマから以下の必要PHPファイルをコピー、修正
• footer.php（子テーマ） ・アクセス解析用にResearchArtisanLiteのHTMLタグを、</body>直前に設置 （一番最初にやること!） ・コピーライトにサイト名を追加
• loop.php（子テーマ） カテゴリーページでサムネール画像がない場合に表示される、グレーのnoimage画像（以下のコード）を削除

  else { echo '<img src="' . get_template_directory_uri() . '/images/noimage_174x131.png' . '" alt="No Picture" />'; }

• mh-widgets.php（includeテンプレートを直接編集/子テーマだと反映されない） ウィジェットでサムネール画像がない場合に表示される、グレーのnoimage画像（以下のコード）を削除

  else { echo '<img src="' . get_template_directory_uri() . '/images/noimage-cp_small.png' . '" alt="No Picture" />'; }

• 上記方法だとテーマが更新された場合、再度mh-widgets.php を修正する必要がある。2014.8.26 テーマ更新の際、noimage-cp_small.png 画像を差し替えた（同名で別画像を作成しimage ディレクトリにアップ）（2014.8.27）
• single.php（子テーマ） 投稿記事ページをワンカラムにするため、以下のサイドバー読み込み部分を削除（+CSS編集）

  <aside>
          <?php dynamic_sidebar('sidebar'); ?>     
  </aside>

• comments.php（子テーマ） コメント欄の文字を日本語に修正
• functions.php（親テーマ） 前後の記事へのリンクを修正するため、 /***** Post / Image Navigation 削除*****/以下の部分を削除
• contens.php（子テーマ） ・前後の記事へのカテゴリ別のリンクを表示させるため、ウィジェット Post2の読み込み部分の直前に以下を記述

  <nav role="navigation">
  <div>
  <?php previous_post_link('← %link', '%title', TRUE, ''); ?>
  </div>
  <div>
  <?php next_post_link('%link →', '%title', TRUE, ''); ?>    
  </div>
  </nav>

  ・トップに戻る、カテゴリーアーカイブへ、HOMEへ のリンクを以下のコードで、前後の記事へのカテゴリ上部に設置（+CSS画像設置・編集）

  <div>
      <ul><li><a href="#page-top" title="トップへ戻る"><img src="/wp-content/themes/mh-magazine-lite-kid/images/totop-b.png" alt="トップへ戻る"></a></li>
      <?php 
      $cat = get_the_category();
      $cat = $cat[0];
      ?>
      <li><a href="<?php bloginfo('url'); ?>/category/<?php echo $cat->category_nicename; ?>" title="カテゴリーアーカイブ"><img src="/wp-content/themes/mh-magazine-lite-kid/images/tocategory-b.png" alt="カテゴリアーカイブ"></a></li>
      <li><a href="<?php bloginfo('url'); ?>" title="HOME"><img src="/wp-content/themes/mh-magazine-lite-kid/images/tohome-b.png" alt="HOME"></a></li></ul>
  </div>

  ・記事ページのタイトル下アセット表示からPosted by などの余分な記述を削除

• header.php（子テーマ） ・IE7対策 script 追加 ・contents.php に追加した topへ戻るボタン用に以下のタグをheader部分に追加
  <a name="page-top"></a>

4．CSSによるカスタマイズ

• body フォントファミリー、フォントサイズ
• ヘッダーロゴ画像の非透過率
• メインナビゲーション
• スライダー タイトル回り
• ｈタイトル部分
• フロントページ ウィジェット home1部分
• 引用
• 記事投稿ページのワンカラム化
• サイドバーウィジェット、カレンダー
• フッターウィジェット 月齢 非透過率など
• ソーシャルボタン、パンくずリスト
• 前後の記事リンク、トップ/Home/Categoryへ戻るボタン 非透過率など
• 子テーマに editor-style.css を作成、ダッシュボードのエディタスタイルを設定

5．テーマ更新（追記/2014.8.27-2015.5.17）

更新のないテーマだなあと思っていたら、適用後初めての更新があった。 更新したところ、なぜかChromeでCSSが崩れてしまい焦った。 FirefoxもIEも問題ないので訳が分からず。 あれこれチェックするにあたっていちいちCashをemptyにするのが面倒なので、 W3 Total Cash を停止したところ、CSS崩れもなくなった。 テーマ更新の際、うまくCSSが適用されない段階のCashが残ってしまっていたのか ?

それにしても、emptyにしたときも崩れたままだったし、 Chromeだけがおかしいというのも不思議な話。 原因は不明ながら、W3 Total Cashがらみの問題ではあるようだ。 作業終了後も有効化をためらっている（その後恐る恐る有効化した。 次回のテーマ更新は停止してからやることにしよう）。 その後有効化するもやはりCSSが崩れ、再度無効化。 もう削除するしかなさそう。

●上記にも追記したけれど、フロントページや投稿記事の「最近の投稿」のタイトルに表示されるサムネール画像、アイキャッチ画像を挿入していない場合はグレーの画像が表示されてしまう。この箇所は include/ mh-widgets.php からコードを削除して非表示にしていたのだが、テーマ更新でデフォルトに戻ってしまう。子テーマで設定できないからだ（方法はあるのかもしれないが、わからない）。

この際なので画像そのものを小さな三角矢印に変更してみた（結局更新で元に戻っちゃうけれど…）。 ⇒親テーマ＞Images＞noimage-cp_small.png を、その都度以前の▲矢印（同名）に入れ替える

※テーマのバックアップ（mh-magazine-lite-150221/親テーマ/images）内のnoimage-cp_small.png（5×53px）を使用すること

●投稿記事ページの  ← Previous article  Next article → （前後の記事へのリンク）、カテゴリー別に前後の記事へリンクさせるように変更し、デフォルト表示は fanctions.php で /***** Post / Image Navigation *****/ を削除（またはコメントアウト）していた。

これもコメント欄上部に表示されるデフォルトに戻ってしまうので、親テーマのfanctions.php から該当箇所を再度削除する必要あり。一瞬、これはこれで時系列の前後の記事リンクとして残しておいてもいいかな、と思ったものの。 しかし、どこでこれを削除したのか記憶が甦らず（他ファイルで規定してるんじゃないかと思って探してみたけれどわからず）、自分で書いたメモ再読で判明。メモがなかったらとと思うと恐ろしいわ…。

●もう一か所、フッターのcopyrightの（CSSが変更されたのか ?）表示が崩れていたので、CSSを修正した。

●さらに一か所、ウィジェットの記事タイトル前のグレーの三角arrow画像が表示されなくなっていた。（実はしばらく気付かず。自分で設定したことも忘れていて、新規に設定しようとしてもうまく画像リンクが出てこず、あきらめかけるも…やっと要素の検証で子テーマのCSSに気付く） これは、画像を親テーマのimagesに入れておいたのが、テーマ更新でごっそり画像データも入れ替わってしまったため、参照画像が亡くなっていたためであった。今回は子テーマのimagesにアップし、子テーマでスタイルシートの参照パスを書き変える。

.sb-widget li {
 background-image: url(/wp-content/themes/mh-magazine-lite-kid/images/arrow_small.png); }

2015.5.17 / 1.8.2 への更新でレイアウトが崩れる件

レスポンシブになった。が、子テーマ＆CSSで崩れてしまうため、以下の処置をしてレスポンシブはあきらめる。 ➾ 応急処置で子テーマのCSS ＠import で旧1.7.1のCSSと二個を読み込ませていたけれど、 以下の作業でOKとなる ➾ 1.7.1 から以下をCSS編集（or 子テーマのCSS)に追加

.container {
    width: 980px;
    margin: 20px auto 0;
    position: relative;
    -webkit-box-shadow: 0 0 5px 1px #a8a8a8;
    -moz-box-shadow: 0 0 5px 1px #a8a8a8;
    box-shadow: 0 0 5px 1px #a8a8a8;
}

.wrapper {
    padding: 20px;
    background: #fff;
}

.content {
    width: 620px;
    overflow: hidden;
}

.sidebar, .hp-sidebar {
    width: 300px;
    float: left;
}

➾ 子テーマの homepage.php … よく見たら不要だったので00にリネーム（=削除）
子テーマの single.php の CSS を修正 .wrapper > .mh-wrapper　.contet > .mh-content