只ほど高いものはない、と言う訳で無料ブログサービスシステムから WordPressに二つのブログ、1,000以上に及ぶ記事をまとめて移行したのですが 合間、合間の作業ともあって随分と時間が掛かってしまいました。 テーマは親テーマに独自のカスタマイズを少々施す子テーマを宛てがう手法を採用しました。 移行作業開始時の親テーマには最新のWordPress標準のテーマ Twenty Fifteen を利用しましたが年も改まって最新の標準テーマ Twenty Sixteen が提供されていますので 移行のほぼ完了した段階で親テーマを最新のものへと更新した次第。
確認したところTwenty Sixteenがインストールされてもおらない状況でしたので 先ずは其のインストールからです。
Twenty Sixteen >> インストール Click!
此の時点でテーマの有効化はせず以下スタイルシートを編集します。
/*
Theme Name: tech-acenumber
Template: twentysixteen
Author: Masahisa Shoosen Tsukamoto
Theme URI: http://www.acenumber.com/
Description: エースナンバーTECHブログテーマ
*/
以上を以て切り替えは無事成功裡に終わりましたが 但しレイアウト崩れが見られるようになってしまいましたので 目視確認しながら一つづつ崩れの原因を潰して行きます。
原因の一つには header.php が間違いなくありますので Twenty Sixteenテーマから当該ファイルをコピーして編集を施します。 例えば以下の部分がFatal Errorを吐かせるため取り敢えずコメントアウトなどで対処します。
またアドセンスなども導入していれば崩れの原因の一つに成り得ますので 此れも然るべく対応します。
また一つには sidebar.php も崩れの原因になり得ます。 此れもTwenty Sixteenの当該ファイルをコピーして編集します。 手元の環境では以下の緑色字の部分を元テーマから単純に突っ込むだけで何事もなく機能し崩れも収まりました。
<div class="ad">
<div>スポンサーリンク</div>
<div id="ad-content"></div>
</div>
<aside id="archives-pulldown" class="widget widget_archive">
<h2 class="widget-title">月別アーカイブ</h2>
<select name="archive-dropdown" onChange='document.location.href=this.options[this.selectedIndex].value;'>
<option value=""><?php echo attribute_escape(__('Select Month')); ?></option>
<?php wp_get_archives('type=monthly&format=option&show_post_count=1'); ?>
</select>
</aside>
<aside id="categories-pulldown" class="widget widget_categories">
<h2 class="widget-title">カテゴリー</h2>
<?php wp_dropdown_categories('show_count=1&show_option_none=カテゴリを選択'); ?>
<script type="text/javascript">
<!--
var dropdown = document.getElementById("cat");
function onCatChange() {
if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home');
?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
}
}
dropdown.onchange = onCatChange;
-->
</script>
</aside>
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- .sidebar .widget-area -->
特に footer.php は崩れの原因とはなっていませんでしたが此処迄対応したら一緒ですので Twenty Sixteenの当該ファイルをコピーして 以下部分を削除し自らのクレジットに置き換えました。
...
<span class="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<?php bloginfo( 'name' ); ?>
</a>
</span>
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentysixteen' ) ); ?>">
<?php printf( __( 'Proudly powered by %s', 'twentysixteen' ), 'WordPress' ); ?>
</a>
此処迄はごく一般的な処理ですがさて Twenty SixteenテーマがTwenty Fifteenテーマと大きく異なるのは template-parts フォルダが採用され content.php 等のファイルが其方に位置を移されていることにあります。 従ってTwenty Fifteenの作法で幾ら子テーマ直下でcontent.phpを編集しても まるでキャッシュが効いているように変化がなくて戸惑うばかりとなります。 併せて content-single.php ファイルも導入されているので従来のようにcontent.php内で is_single() を用いて分岐して書く必要がなくなったのも相違点として挙げられるでしょう。 投稿ページのみで何某か処理したい場合は従って template-parts/content-single.php に処理を記述することになります。 従って template-parts/content.php は親テーマTwenty Sixteenに任せて上げる必要はなくなります。 手元の環境では more タグの後に広告表示をしていますので必要な処置を施しました。 此れはテーマを最新に変更する旨みだと考えます。 最新の標準テーマにはWordPress運営のWebに対する方針が顕れていると見るべきで積極的に導入する理由になるでしょう。
次に崩れの一つとしてdivタグの entry-content クラスと entry-footer クラスの間に入れていたがデザインが乱れる現象が見られました。 Twentye Fifteenでは順次relativeで配置されていた其々が左右にレイアウトするために Twenty Sixteenではこの両者をfloatで配置しているためでした。 此れは次に入れるべきコンテンツでフロートをクリアしてやれば解決出来ます。
また崩れではありませんがPCでサイトを閲覧した際、 Twenty Sixteenではページ全体が黒枠で覆われているため 日本の読者をメインに据えている場合は余り好ましいデザインとは言えないでしょう。 此れはスタイルシートを修正して対応します。 以下の如く子テーマのstyle.cssに記述して全体のスタイルを上書きします。 尚 SCSS記法 で記述していますのでネスト等させた部分があります。
* 14.1 - >= 710px
*/
@media screen and (min-width: 44.375em) {
body:not(.custom-background-image):before,
body:not(.custom-background-image):after {
background: inherit;
content: none;
display: none;
height: auto;
left: 0;
position: relative;
width: auto;
z-index: 0;
}
.site {
margin: 0;
}
}
アドセンスを利用している向きには 背景色と余白が設定されてしまうので 崩れの一つとして除去の対象となるでしょう。 以下の記述ではアドセンスタグをadクラスとしたdivタグで囲んでいる状況です。
* 3.0 - Typography
*/
div.ad {
ins {
background: none;
color: inherit;
padding: 0;
text-decoration: none;
}
}
リンクに不要な下線が表示されていましたので クレジット部分のホバー状態では其の儘にして 他は消すために以下の如くスタイルシートを処理しました。 border ではなく box-shadow で下線が表示されていたりすると戸惑う所かも知れません。
* 6.0 - Navigation
*/
/**
* 6.1 - Links
*/
.entry-content a,
.entry-summary a,
.taxonomy-description a,
.logged-in-as a,
.comment-content a,
.pingback .comment-body > a,
.textwidget a,
/*.entry-footer a:hover,
.site-info a:hover */ {
box-shadow: none;
}
此処迄で凡そ崩れは抑え形は整いましたが新親テーマ Twenty Sixteenでは記事コンテンツの左に目立って投稿者のバイオグラフィーが並列表示されますので 最後に味気ない無名のアバターアイコンを独自画像に変更したく思います。 基本的にはWordPressで標準の Gravatar（グラバター） を導入すべきなのでしょうがユーザー毎にメールアドレスが必要で其々登録する必要があるようでしたので 今回はプラグインで対応することにしました。 以前も利用したことのあるアバタープラグインに Simple Local Avatars がありましたがWordPressの管理画面で検索して詳細を見ると最終更新が3年前で少々時間が経ち過ぎている感があります。 其処でネットを繰るとサイト OPEN CAGE の2015年11月28日の記事として以下がありました。
WordPressで投稿者プロフィール画像(アバター)を設定する方法此処に上のプラグインとほぼ同じ機能を有すと紹介される WP User Avatar なるプラグインがあり再びWordPressの管理画面で検索して詳細を見るとバージョンは2.0.7で 最終更新が2ヶ月前となっていますので此方を採用することにしました。 検索結果から其の儘 今すぐインストールする をクリックすれば最近のWordPressシステムでは画面遷移せず右上でインストール中のアイコンが回り、 程なく有効化アイコンに変わりますので此れをクリックすれば WordPress管理画面の左ペインには アバター 項目が追加されているのを確認できます。
ユーザーのアバター画像の設定は上の如くユーザー項目で行います。 其々アバター画像を変更したいユーザーの項目で 編集 をクリックして当該画面へ遷移するとWP User Avatarインストール前と異なり 画像の選択 ボタンが追加されています。 此れをクリックすると記事投稿時の画像アップロードと同じフォルダ /wp-content/uploads/*** に画像をアップロード出来ユーザー画像として登録され 投稿ページのバイオグラフィ部分には当該画像が表示されている筈です。
モバイルファーストへスタイルシートが対応した際はメディアクエリーが逆になるなど 対応に難儀する場合もありますが 今回は其れ程の苦労も要らず対応でき取り敢えず数日を経ても問題は見られません。