WordPressサイトのリノベーション

このサイトは、YARPPによるサムネイル付き関連記事表示以外、目立った変更はないように見えるかもしれないが、レスポンシブというかスマホ対応をメインとしたビジュアル路線とは別に、子テーマによるテーマファイルカスタマイズをベースとして、数日をかけた大改装をおこなっている。

WordPressサイトのリノベーションの中心テーマは、できるだけカスタマイズ箇所を少なく、修正作業を軽減し、1つを変えれば数ページが更新されるように、設計の軸を確かにすることである。

【追記】

数年前の記事で、今はYARPPは使わずflexboxで代替
サムネイルを取り込むプラグインも、サーバー内にキャッシュを作成するので、サーバー使用容量が莫大となって、これも使用停止
画像の複数サイズ運用も、止めたい
極めつけは、ショートコードは、include非推奨なので、今はget_template_partに

WordPressサイトも使用するテーマに依存する

今回思い知ったことは、常用しているWordPressテーマの仕様や機能に、いかに恩恵を受けていたか、ということである。

つまり、他のテーマに浮気をしてみたら、つれない仕打ちを受けたということでもある。

とくに、困ったときのプラグインでさえ、うまく動かすことができないテーマも、多いのである。

どんなテーマでも子テーマで運営するという方針

ミーティングの結果、とにかく常用のテーマをカスタマイズするにせよ、他社製を含む複数の種類のテーマを使うことになっとしても、最低限サイトが無難に表示されるようにするためには、まずは子テーマでできるかぎりのカスタマイズをするべきであると、落ちついた。

まあ、プラグインがあればどうにかなるという、WordPress小児病から解放されたことは、祝着である。

今回のリノベーションでは、このように最近まで使っていたプラグインを「11個」停止させている。

プラグインを減らすことによって、ソースもやや軽くなり、読み込みも速くなった気がする。
気のせいかもしれないが…

SEO×WPレスポンシブ テーマのバージョンアップ

さてseojuku.comは、子テーマをつくらずに数々のファイルを修正していたので、サイトが壊れるのをおそれて、テーマのバージョンアップができずに1年半が過ぎていた。

とにかくWordPressは子テーマで

よって、テーマのバージョンアップを前提として、旧バージョンのテーマで、カスタマイズしたファイルを子テーマに移動して、親テーマに素の旧バージョンを復帰させる。
問題なし。

そして、親テーマのほうを、バージョンアップ。

すこし、表示が乱れたが、おそらく、新バージョンのコーディングやらstyle.cssやらが、変更されたのだろう。

教訓としては、子テーマを用意したからといって、親テーマをバージョンアップしたなら、多少は影響があるということである。

手順としては、次のとおり

あとは、新バージョンの親テーマのファイルをベースに、あらためて子テーマのファイルを作り直しすることになる。
はずだった…

新しいテーマではphp5.2でエラー！

テーマのバージョンアップまでは、重大な問題はなかったのだが、ある特定の操作をすると、次のようなエラーが出て困ったことになった。

Parse error: syntax error, unexpected T_FUNCTION in ほげほげ

しかも新バージョンは、数多くのサイトでインストールしているので、seojuku.comだけでエラーになることが不思議でしょうがない。

よく調べてみると、このエラーは、php5.2など5.3未満で現れるらしい…
（新テーマのバージョンアップで、ソースも変わったということになる）

たしかに、seojuku.comのサーバーでは、phpは5.2.17になっていた。
ちなみに、他のサイトは別サーバーにあって、phpはどれも5.4以上となっていた。

慌ててサーバー会社へ問い合わせ php5.6へ

とにかく、WordPressのテーマが使えないだけでなく、phpの古いバージョンの脆弱性の問題もあるとのことなので、急いでサーバー会社へ問い合わせしてみた。
（まあ、今さらということで、情けないことである）

対応策を教えてもらって、今は無事、php5.6で運営している。

つまり、WordPressテーマの新バージョンは、とりあえずは動くことになったわけだ。
ただし、表示というか見た目のほうは、かなりグダグダのところが散見された。

ここから、突貫で、子テーマのファイルをカスタマイズする、重労働がはじまるのである。

WordPressサイトのリノベーションでも新規立ち上げでも

seojuku.comのリノベーションだけでなく、じつは、あるプロジェクトで他社製の複数のテーマをつかってWordPressサイトを立ちあげている。

ほんとうは、それがきっかけで、子テーマ運用の話や、最低限のプラグインなどが、クローズアップされてきた。

しかも、テーマによっては、どうしても頼りたいプラグインがうまく動かないことが多く、あらたな悩みや苦しみがはじまることもある。

決定的なことは、SEO対策済みといいながら、そうではないものも多かった。

そして、簡単なアプローチではあるが、試行錯誤が繰り返される、CSSのカスタマイズが大ごとということも思い知る。

プラグイン編

では、どのテーマを使っても、問題起こりにくく、非常に重宝する選抜プラグインからはじめよう。

まず、ビジュアル路線では、画像が重用される。
そして、同じ画像が、サイズを変えて、あちらこちらで使われる。
アイキャッチというか、サムネイルも、利用価値が大きい。

画像関係：Regenerate Thumbnails

レスポンシブ、サイトのスマホ対応では、画像の複数サイズを用意したほうが、いいかもしれない。

ただ、1年ほど未更新のプラグインが多いので、ここでは紹介しない。
（自己責任で、検索して導入していただきたい」）

次のプラグインは、画像を使うページが多い、しかも投稿ごとにサムネイル/アイキャッチを設定するのが面倒というときは、ページの最初の画像をサムネイルに取り込んでくれる。

3桁や4桁のページ数があるサイトでは、生産性を失うことなく、ビジュアル路線をそれなりに進めることができるだろう。

内輪の話なので簡単に端折るが、それこそ5桁のページ数に相当するCSVデータをWordPressに読み込むことがあり、サムネイルは設定されていなかったが、コンテンツのはじめに都合よく、正方形の画像が設定されていた。

よって、CSVをインポートしたあとで、Regenerate Thumbnailsでサムネイル作成して、めでたしめでたしとなったことがある。

functions.phpでの追記

別投稿でも記述しているが、あらためて

/* Regenerate Thumbnails用に画像サイズのバリエーション */
if (function_exists('add_theme_support')) {
add_theme_support('post-thumbnails');
add_image_size( 'large', 500, 300, false );  // サムネイル大
//add_image_size( 'default', 250, 150, false ); // サムネイル メディア設定
add_image_size( 'medium', 150, 90, false ); // サムネイル中
add_image_size( 'small', 125, 75, false );   // サムネイル小
}

あれから方針を確立して、サムネイルも4種類のサイズを用意するようにして、functions.phpにも設定している。

その他のプラグイン（Max Mega Menu、Shortcodes Ultimate、Table of Contents Plus）

レスポンシブメニューが欲しいときは、

なお、このプラグインは、グローバルメニューで主に利用するので、使えないテーマが多いのでご注意。
（このサイトでは、一番上にあり、スクロールすると追いかけてくる）

次のように、外部リンクにはちょっと凝ったリストマークなどを使いたいときは、

とくに、コンテンツはじめの「目次」：Table of Contents Plus

コンテンツがある程度ボリュームがあって、見出しタグでマークアップしているときは、目次があるとユーザー利便性がある。

鬱陶しいこともあるかもしれない。
なお、見出しには検索されたいワードを入れることが多いので、ユーザー利便性をベースに（カムフラージュして？）、キーワード記述量が増えて、SEOにも効果ありと言える。

動的に生成されるが、Fetch As Googleでも読み込まれていることを確認。

今回は詳細を述べないが、表示はCSSで微調整する。
見出しタグから英子文字のidをつけてアンカーにするので、こちらの「#セレクタ」と被っておかしくなるときがあるので注意。

デフォルトの設定でいい位置に表示されないときは、投稿やページで表示のチェックをはずし、テーマなどで表示させたい場所に[toc]を記述する。

子テーマ編 ショートコード

別ページでも、子テーマ、style.cssやfunctions.phpについて書いているが、

今回は、見た目というよりも、サイト運営側の作業が、おそろしいほど軽減される裏技を取り入れている。

Table of Contents Plusでもショートコードが使われているが、このショートコードを使いはじめるとクセになる。

ショートコードでコンテンツ内に別phpファイルを読み込む

ブログの全ページの下部には、次のような広告が表示される。

最初は、single.phpに直接書き込んでいたが、これを別ファイルに移して、
＜?php get_template_part( ‘my-ほげほげ’ ); ?＞
で、読み込んでいる。

SEO塾のSEOは、脱着可能なモジュールを追求しているので、このようにテーマファイルの中に埋没するのではなく、別ファイルで独立させるほうが、願ったりかなったりである。

SEO×WPレスポンシブでは、テーマの管理画面でいろいろなものがモジュール化できているのだが、他社製テーマでも実現できる、より柔軟性のある「シン・紹介風リンク」モジュールの再登場である。

このページの上部、タイトルと同テキストがh1、サムネイル/アイキャッチ、meta descriptionと、3点セットを最近設定している。

サムネイル/アイキャッチのビジュアルを活かした、「シン・キーワードモジュール」とでも名付けようか…

なお、phpファイルでありながら、HTMLソースしか書いていなくても、上記の「get_template_part」コードがある場所で別phpファイルが読み込まれる。

ところが、投稿や固定ページでは、phpコードを書いても実行させることができない。
いや、実行させようとすると、更新停止してる「Exec-PHP」や、ファイルもゲットしにくい「runPHP」などを危険を承知でインストールすることになる…

なんとか、ならないか？
そして…

下記ページを見つけたときは、飛び上がるほど嬉しかった。

functions.phpでの追記

例によって、子テーマのfunctions.phpで追記。

/* ショートコードを使ってphpファイルを読み込む */
function my_php_Include($params = array()) {
extract(shortcode_atts(array('file' => 'default'), $params));
ob_start();
include(STYLESHEETPATH . "/$file.php");
return ob_get_clean();
}
add_shortcode('myphp', 'my_php_Include');

次に、読み込みたい別phpを、投稿や固定ページなどの任意の場所に、ショートコードを書く。

上記の「シン・紹介風リンク」モジュールであれば、
[myphp file=’my-ほげほげ’]
などと記述する。

「my-ほげほげ」は、子テーマの中の「my-ほげほげ.php」である。

ところどころに出現する、このような弊社サービスも、別の呼び出しショートコードを記述して、読み込んでいる。

ショートコードで別phpファイル記述のAdSenseやアフィリエイトバナーなど

AdSenseや、ランダムに変化するアフィリエイトバナーなどは、このように1ファイルに記述して、テーマに設定したり、読み込みたいページにショートコードを書いておけば、マネジメントが非常に楽になる。

テーマや個別ページに直接書くと、その箇所を探すのが面倒で、違うところも修正したりすると、ややこしいことになる。

また、同じことがプラグインでもできるが、プラグインがWordPressのバージョンアップで挙動不審になったりすることもあり、やはり、このやり方がベストではなかろうか。

とにかく、サイトがある程度大きくなり、担当者も外注などを含めて多くなると、このような設計が大きな意味をもつようになる。
もちろん、少ないページで、少ないスタッフで（ひとりで！）運営していても、楽になることは間違いない。

別phpファイルをディレクトリーに格納

別phpファイルを量産すると子テーマのディレクトリーが氾濫気味になってうっとうしい。
そこで、ディレクトリーをつくって、そこに別phpファイルをおさめるようにすると、美しくなる。

子テーマのディレクトリー/myディレクトリー

子テーマの中に、「myディレクトリー」というディレクトリー（フォルダー）をつくると

 /* テーマファイルでの読み込み*/
<?php get_template_part( 'my-ほげほげ' ); ?>
↓
<?php get_template_part( 'myディレクトリー/my-ほげほげ', 'page' ); ?>

/* 投稿や固定ページのショートコード用 functions.php */
include(STYLESHEETPATH . "/$file.php");
↓
include(STYLESHEETPATH . "/myディレクトリー/$file.php");

なお、functions.phpでディレクトリー設定しているので、ショートコードは
[myphp file=’my-ほげほげ’]
のままでいい。

【追記】

ここでのincludeは非推奨になっているので、 get_template_partを使うべきである。

上記ページを参照していただきたい

ボックスの高さをそろえる

最後は、別php読み込みの、やや手こずったところ。

これも、別phpの、ナビゲーション・モジュールである。

パソコン、タブレット横縦、およびスマホ横では、上記が表示され、
スマホ縦では下記が表示される。

そのようなレスポンシブのボックスについては、コーディングとCSS次第で、別の話である。

今回は、並ぶボックスの高さをそろえる方法である。

前者がJavaScriptで高さをそろえたい親のところのclass名に「heightLine」を設定する。
後者はJQueryの最新バージョンで、JavaScriptの中で高さなどを設定する。

色づけしていて、横4つでの、縦2こ2こでも、そろっているのが気に入っている。

追記：特定投稿ページだけにCSSを適用する

余計なことだが、

↑上記ページは、抜粋、meta descriptionが長い。
（違和感があったので、）

それが、ヘッダー箇所と、コンテンツのサムネイル/アイキャッチの横に表示されるようにしてある。

このページだけに適用されるCSSは、body要素にあるページIDのセレクタをつけると可能になる。

.postid-ほげほげ header p { ～ }
.postid-ほげほげ p.exerpt { ～ }

固定ページでも、「page-id-ほにゃらら」とページIDがあるので、いざというときは超個別CSSが使える。

WordPressならどんなテーマでも

こうして、現行のSEO×WPレスポンシブは当然ながら、万が一の他社製のテーマであっても、そのテーマやプラグインにあまり依存しない、汎用性のあるサイト運営ができると思える。

こうして、当サイトのリノベーションと、他の数サイトの立ち上げは、レガシー（遺産）として、今後の役に立つだろう。

WordPress カスタマイズなら

好評発売中

インスタや今風のECサイトのカード型フィードが、あっという間にできあがり
カテゴリーやタグの関連コンテンツも、お茶の子さいさい
テーマに頼らず、プラグインを使わず、スイスイとWordPressカスタマイズ