WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

シンプルなテーマ「Simplicity」を使う設定メモ

公開日:2015年11月15日 サイト作成日記

長いこと「Atahualpa」を使ってきましたが、テーマのカスタマイズ性は良かったのですがその先が・・・例えばカスタム投稿タイプを遣ったり記事をテンプレート化したりするというのは難しそうなので、思い切ってテーマ変更することにしました。

と言ってもこのサイトはある程度訪問していただいている方が多いので、ちょっと躊躇してしまってひとまずテスト的に作っているサイトでいろいろ設定を試してからということにしようと思っています。

興味のある方はこちらのsimplicity公式サイトを覗いてみてくださいね。

あんまりアクセスのないサイトですから、テーマ変更によるSEO効果はその方が分かるかなと思います。ソース表示してみたら結構すっきりしています。

「Atahualpa」のようにテーマ設定のエクスポート/インポートが行えないので1つ1つ設定していくことになるのですが、その時に迷わないように自分に対するメモとして記事にしておきます。

何故「simplicity」に??

 いろいろとテーマを探す中で、一番の問題はカスタマイズする際にサポートページが充実しているか?でした。simplicityはテーマのブラッシュアップも行われているし、何より作者が不具合や使い方に関して細かく記事をアップしてくれているので何か問題があっても大丈夫と思えたからです。ワードプレス標準のカスタマイザーにも対応しているし、レスポンシブにも対応しているし、プラグインで使っている機能もいくつか備えているので動作が軽くなるかと思われますのでこのテーマに決定しました。
 また、テーマをカスタマイズするにあたって次に問題となるのがファイル構造。私はテーマに関して超?初心者ですからいろいろな部品が1つのファイルに入っているプラグインでは飛び先の把握ができずカスタマイズしきれない部分が出てくると思います。simplicityは部品ごとにファイル化されているので単純に分かりやすいかな?と考えました。

インストールから設定までの内容

ヘッダーに入れるコードの挿入

Webmastertoolやアナリティクスのコード入力はカスタマイザーからでもできるのですが、その他のものは?となってしまいそうなので、ひとまずheader.phpの末尾閉じタグ前にAtahualpaでHTML挿入していたコードをそのままコピー。Webmastertool他問題なく認識してくれているようなのでひとまず設定は完了しました。

アドセンスのターゲットコード

アドセンスには広告精度を上げるためのターゲットコードがあります。プラグインで実装してもよかったのですが、せっかくなのでテーマに直接記述。記述先はpage.php、single.phpそれぞれのループ前後。

<!– google_ad_section_start –>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします


をループ前に、
<!– google_ad_section_end –>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします


をループ直後に入れて・・・これでOKだと思われます。simplicityは部分部分でしっかりコメントアウトしてくれているので初心者でもコードの流れが分かっていいテーマだとつくづく思いました。
まあ、プラグインでやるなら「Ad wrap」というのを使えば有効化するだけで大丈夫なのですが・・・できるだけプラグインに頼らずいこうと思ってます。

ひとまずカスタマイザーの範囲内でデザインする

基本的な見た目の設定は細かくできるようになっているのでカスタマイザーでやることにします。

「simplicity」で削減できたプラグイン

「simplicity」で実装されている機能とバッティングするプラグインを1つ1つ停止

  1. Wp Touch・・・モバイル表示用
  2. Wp to top・・・記事や固定ページのトップへ戻るボタン
  3. Yet Another Related Posts Plugin・・・関連記事を表示
  4. Add Post URL・・・本文先頭や末尾に広告などを表示
  5. Advanced Excerpt・・・記事の要約表示
  6. Auto Post Thumbnail・・・サムネイル画像の自動生成

6つ削減。プラグインを削減することでサーバー負担も減らせるのでありがたい。

広告コードを本文から外す

アドセンスの広告コードを表示できる箇所ができているのでそちらを利用するにあたって今まで書いた記事本文からコードを外す作業。これが猛烈に大変でした。テスト用のサイトは100程度の記事でしたからまだましですが、その他のサイトは・・・。ついでにCS SHOPのコードも本文挿入されていたものからウィジェットへ移動。ウィジェット移動に当たってはカスタムフィールド使って配信スタンドとキーワードを抽出するようにしたのでこれで自動化できます。

ウィジェットでショートコードが使えない現象発生

いくつかのサイトを変更しているうちに1つだけテキストウィジェットに入れたショートコードが表示されない(ショートコードそのものが表示されてしまう)という現象が発生しました。環境も一緒、コードも他のサイトと一緒なのになぜ??本文に同じショートコードを入れるとちゃんと表示されるので、ウィジェットの問題のよう・・・ということでfunctions.phpに以下のコードを追加して終了。ちゃんと表示されるようになりました。

//テキストウィジェットでショートコードを使用する
add_filter('widget_text', 'do_shortcode');
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

末尾に追加しましたが問題なかったです。

固定ページなどタイトルを表示しないようにしたい時

記事はタイトルが必要だとは思うのですが、固定ページはメニューからクリックで開くので特にページそのものにタイトルの表記は必要ないということで、

プラグインを入れました。

いよいよこのサイトも着手

デザイン的なものは置いておいて、何となくいいものだったらやっていこうということでこのサイトもsimplicityへ変更することにしました。とはいえ特にアドセンスは広告数制限があるので違反にならないよう準備(主に広告外し)が必要なので、段取をば・・・。

まずは影響の少ない記事からメンテナンスしていって、最後にアクセスのある記事(もちろんこうした記事はアドセンスの収益源)をやってテーマ変更って段取にすればいいかな。とにかく500以上も記事や固定ページがあるから覚悟が必要ですね。

「Display posts in grid layout without coding – Content Views」プラグイン

詳しくはリンク先の説明を読んでくれれば分かると思いますが、Simplicityの記事一覧タイル表示のような形式のものを記事や固定ページに再現できるプラグインです。

ブログカードを使う

Simplicity特有の機能であるブログカード。テキストをクリックするとリンク先に飛ぶというのが通常のリンクですが、リンク先の情報をカード状で表示してくれるというもの。ブログカードを使っている複数のサイト同士のリンクでも使えるので便利です。思わず内部/外部リンクづくりに夢中になりますヨ。
ブログカードの表示は↓↓みたいな感じ

メタデータなどの整理

一覧などに表示させる要約やソースの中に埋め込むメタデータの整理。もともとMeta Managerプラグインで設定していたのでそれを流用しつつSimplicityとのマッチングを図りました

少しずつ設定する度に追記していきますね。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

【スポンサーリンク】