初心者でも簡単!SimplicityからAMP対応のSimplicity2へコピペで移行する方法

カテゴリー別今日の人気ランキング

移行のきっかけと AMP 機能

今まで、Simplicity の最終安定版 ver.1.9.3 を利用していましたが、Google AdSense から「AMP(アンプ、Accelerated Mobile Pages)」と言う新しい最適化のお知らせがあり、これを機に Simplicity から AMP 対応の Simplicity2 へ乗り換えることにしました。

AMP は、GoogleやTwitterなどが共同で参加している AMP プロジェクトが構築した仕組みで、モバイルページを高速に表示させるための新しい技術仕様です。

  • AMP を実装すると、スマホ上でページを表示させるのが早くなり、モバイルページの表示速度が高速化してユーザー満足度を高めることが出来ます。

  • また、AMP に対応しているサイトは「カルーセル」という左右にスワイプできる、見やすい記事が、Google検索ページのトップに掲載されるチャンスがあります。

AMP の詳細については下記を参照してください。

WordPress /Simplicity のAMP機能とAMP Validatorの使い方
AdSenseの新しい最適化のお知らせ Google AdSenseのマイページを開いたら「AMP(アンプ、Accelerated Mob...

Simplicity2 では大幅な仕様変更があり、Simplicity1 とは別物とのことで、今までの設定が大幅にリセットされ、カスタマイザーやウイジェットを再設定し直す必要があります。

移行に失敗や苦労することのないよう、「移行にあたっての手順」や「今回行った設定項目の詳細」を備忘録としてまとめました。参考になればと思います。

Simplicityは ver.2.3.1 から AMP に対応しているということで、2017年5月時点での最新安定版 ver.2.5.0e にしました。

Simplicity2 のインストールでリセットされる項目

色や画像などがリセットされても、デザインが少し変わるだけですが、SEO、SNS、アクセス解析(Analytics)、広告など、の多くの項目がリセットされますので、現在の設定を必ずメモっておきましょう。リセットされる項目は以下のものです。

  1. タイトル色、ナビ色などの色指定はデフォルト値に戻ります
  2. 背景画像、アイコンなどの画像関連は、すべて画像なしになります
  3. 広告は、カスタマイザーで表示される一部項目を除き、すべてリセット
  4. ウイジェットは、WordPress デフォルトのウイジェット以外はリセット
  5. 広告、ショートコードなどのウイジェットに設定した内容もリセット
  6. SNSのIDや、Analyticsのトラッキングコードなどもリセット

Simplicity2 の仕様変更と子テーマの再構築

  1. Simplicity2 では、タイトルデザインで次の2つの仕様変更がありました。

    • 関連記事のタイトルデザイン(「#related-entries h3」→「#related-entries h2」)
    • サイドバーのタイトルデザイン(「#sidebar h4」→「#sidebar h3」)

    子テーマの style.css 「見出し」項目に記述されている、関連記事タイトル #related-entries の修正(h3 → h2)およびサイドバーのタイトルを装飾している場合は、「サイドバー」項目の #sidebar の修正(h4 → h3)が必要です。

    子テーマを利用してサイトデザインをカスタマイズする方法
    子テーマによるテーマの編集方法 WoedPressのテーマは、 配置するコンテンツを設定したり、テーマの機能を設定するためのphpフ...
    Simplicityのサイドバーのタイトルデザインを装飾する
    Simplicity のサイドバータイトル Simplicity のサイドバー「タイトル」のタグ「<h4></h4>」のスタイルは Sim...
  2. 自作ウィジェットやショートコードなどを子テーマで利用している場合は、カスタマイザーの設定をする前に、子テーマの style.css、function.php を再構築しておきます。

    そうしないと、「カスタマイズ」→「利用できるウィジェット」に自作ウィジェットが追加されません。子テーマの設定は上項を参考にしてください。

Simplicity2 の設定

Simplicity2 のインストール

現在運用中の WordPress(Simplicity1)に Simplicity2 を別テーマとして新規インストールします。Simplicity1 と Simplicity2 は名前が違うので、Simplicity1 を削除しなくとも1つの WordPress に2つの Simplicity のインストールが可能です。

後の設定作業に必要となりますので、Simplicity1 は決して削除しないでください
WordPressテーマ「Simplicity」のインストールとアップデート
WordPressテーマ「Simplicity」のインストール SEOに優れたシンプルなテーマといえば「STINGER3」が有名ですが、無...

こうすることで Simplicity1 と Simplicity2 を切り替えて使えるので、新旧の設定を比較しながら Simplicity2 の設定を行うことができます。テーマの移行に失敗しても、Simplicity1 のテーマを有効化すれば元に戻りますので安心です。

設定移行中の不測の事態に備えて、Simplicity1 のバックアップを必ずとっておきます。
phpMyAdminを使ってMySQLのデータをバックアップ・復元する方法
phpMyAdminとは ブログで書き貯めた大事なデータを守るため、定期的にデータベースのバックアップを取っておくことは必須です。不測の事...

Simplicity2 の設定手順

  1. WordPress 管理画面から Simplicity1 を有効化して、Simplicity1 のダッシュボードを表示し、”新しい画面”でテーマカスタマイザーを開きます。
  2. 次に、Simplicity2 を有効化して、Simplicity2 のダッシュボードを表示して、”別画面”でテーマカスタマイザーを開きます。

  3. 2つのテーマカスタマイザー画面を横並びにして、Simplicity1 のテーマカスタマイザーの内容を見比べながら、Simplicity2 のテーマカスタマイザーにコピーしていきます。

移行イメージ

カスタマイザーの設定

Simplicity2 では、カスタマイザーの設定を再設定する必要があります。カスタマイザー設定項目ごとの再設定した内容は以下のとおりです。

  • サイト基本情報:変更なし
  • :サイトタイトル色(#ffffff)、サイト概要色(#dddddd)
    モバイルサイトタイトル色(#ffffff)、モバイルサイト概要色(#dddddd)
    グローバルナビ色(#a48e8c)、グローバルナビリンク色(#ffffff)、グローバルナビリンクホバー色(#afafaf)
  • ヘッダー
    ヘッダー外側背景画像(header.gif)、グローバルナビを横幅いっぱいにする~「ON」
  • 背景画像:背景画像(background.gif)
  • スキン:変更なし
  • レイアウト(全体・リスト):PCでサイドバーをレスポンシブ表示~「OFF」、抜粋に「メタディスクリプション」項目を利用~「ON」
  • レイアウト(投稿・固定ページ)
    投稿日の表示、更新日の表示、カテゴリ情報の表示、編集リンクの表示~「OFF」
    関連記事表示タイプ~「サムネイル4列」、関連記事の関連付け~「タグに関連付け」、関連記事表示数~「4」
    [前ページ] [次ページ] ナビの表示~「サムネイル付き」
  • レイアウト(モバイル):変更なし
  • 画像:変更なし
  • SEO: 投稿・固定ページタイトル後にサイト名を付加~「ON」
    分割ページにrel=”next”/”prev”タグの追加~「OFF」
  • SNS:シェアボタンのタイプ(PC)~「テーマカラータイプ(高速)」
    タイトル下にシェアボタンを表示、feedlyボタンの表示、コメント数の表示、フォローボタンに色をつける~「ON」
  • アクセス解析(Analytics):Google AnalyticsトラッキングID~「UA-xxxxxxxx-x」
    dc.js(ユーザー属性、インタレスト対応)~「ON」
    Google Search ConsoleのID~「f7RVxxxxxxxxxxxxxx」
  • 広告:広告位置~「サイドバートップ」
    広告を中央表示、パフォーマンス追求広告の表示~「ON」
  • ブログカード(内部リンク):サムネイルを右側にする、新しいタブで開く
    日付表示~「更新日を表示」
  • ブログカード(外部リンク):ブログカード有効、新しいタブで開く~「ON」
  • ソースコード:変更なし
  • コメント:コメントの表示~「OFF」
  • AMP(β機能):AMPの有効化~「ON」
  • テーマ内テキスト
    関連記事タイトルを変更~「今回の記事を読んだ人は下記の記事も読んでいます」
  • 管理者機能:変更なし
  • その他:ファビコンを有効~「ON」、ファビコン画像(favicon.ico)設定
  • メニュー:変更なし
  • ウイジェット:別項に記述
  • 固定フロントページ:変更なし
  • 追加 CSS:変更なし

ウイジェットの設定

ウイジェットも同様に、2つの画面を横並びにして、Simplicity1 のウイジェットの内容を見比べながら、Simplicity2 のウイジェットにコピーしていきます。

サイドバーウイジェット

  • [S]人気記事:表示モード~「全ての人気記事(全ページで表示)」、人気記事のタイトル~「よく読まれている記事(月間)」、表示数~「10」、集計単位~「1ヶ月」、閲覧数の表示~「ON」
  • テキスト:広告レクタングル (中)
  • [S]人気記事:表示モード~「カテゴリ別人気記事(投稿・カテゴリで表示)」、人気記事のタイトル~「カテゴリ別人気記事」、閲覧数の表示~「ON」
  • 自作ウイジェット:表示モード ~「新着記事の表示」、閲覧数の表示~「ON」
  • 自作ウイジェット:表示モード ~「更新記事の表示」、記事のタイトル~「最近更新した記事」、閲覧数の表示~「ON」
  • タグクラウド:追加
  • Myメタ情報:メタ情報と入れ替え
  • テキスト:今日のこよみをコピー

その他のウイジェット

  • 広告 336×280:レクタングル (大)
  • 広告 300×250:レクタングル (中)
  • 広告 728×90:ラージ モバイル バナー
  • 広告 320×100:ラージ モバイル バナー
  • 投稿本文上:ショートコード「カテゴリー別今日の人気ランキング」[myWpp_cat]
  • 投稿本文中:レスポンシブ広告
  • 投稿SNSボタン上:ショートコード [phpinclude]
  • 投稿関連記事下: 関連コンテンツ ユニット(レスポンシブ)
  • 固定ページ本文上:ショートコード [myWpp_cat]
  • 固定ページ本文中:関連コンテンツ ユニット(レスポンシブ)、レスポンシブ広告
  • 固定ページSNSボタン上:ショートコード [phpinclude]
  • インデックスリストトップ:ショートコード [myWpp_cat]、関連コンテンツ ユニット(レスポンシブ)、レスポンシブ広告

まとめ(AMP機能の確認)

Simplicity2 の AMP 機能を使うには

Simplicity を Simplicity2 にバージョンアップした目的の AMP 機能を確認してみました。AMP 機能を使うには、テーマカスタマイザーから「AMP(β機能)」→「AMPの有効化」にチェックをいれるだけです。

AMPエラーの原因になったもの

AMP エラーの原因になったものは、次の点です。

  • 目次プラグイン「Table of Contents Plus(TOC+)」が、目次を作るときに、<span id=”AMP”>AMPとは?</span> と spanタグに id=”AMP” を自動付加するために起こるエラー。「見出し」から半角文字を抽出して id としているためで、見出しに使われた半角文字が”AMP”のみの時に起こります。
    これを避けるには、見出しを全角文字の”AMP”にするか、AMP 以外の半角文字が含まれるようにすると OK です。(目次プラグインを使う限り必ず起こるエラーなので、AMP 関連の記事を作成するときは、見出しの”AMP”は全角文字にする
  • ソース表示プラグイン「Crayon Syntax Highlighter」の使用ミス?で <?php の「<」が「&lt;」に変換されずに「<?php」まま残っていた(これ以外のソース表示はエラーになってないので、単純にプラグインの使い方を誤ったぽい

  • Simplicity で自動削除されない属性、bordercolor(tableボーダー色)、nowrap(tr/tdセル内の改行禁止)、width(hrタグの幅指定)、onMouseover/onMouseout(イベント処理)を使用していた
普通に AMP 化すると、かなりの数のエラーがでて、その修正に追われるのですが、Simplicity2 は、ほぼNOエラーです。Simplicity2 を使えば、AMP 対応はとても簡単です。

AMPテストツール

Googleは、AMP を正しく実装できているかどうかを検証するためのツール「AMPテストツール」を提供しています。HTMLに問題がなければ、「有効なAMPページです」という緑色のメッセージが表示されます。

AMP には構造化データは必須ではなくなりましたが、構造化データのテストも合わせて行います。問題がなければ「構造化データが有効なページ」というメッセージを出します。

AMPを正しく実装できているかの確認

こちらのページを AMP に切り替えた結果が下の画像です。

  • 赤枠内の緑アイコンは「AMPで表示中(エラーなし)」のインジケータです。
  • AMP 表示に切り替わったときに緑になれば、そのページにはエラーが無いということになります。
  • 赤はエラーが発生しているということであり、アイコンをクリックすることで詳細が見られます。

AMPページ

上記 AMP ページ中の①「テスト」ボタンを押すと、AMP が有効かどうかの AMP テストを行うことができます。

こちらからアクセスすれば、URL の直接入力も可能です。その場合はURLの末尾に「?amp=1」を付加します。

AMPテスト結果

Google 検索結果の表示シミュレーション

ボタン②の「検索結果をプレビュー」をクリックすると、Google 検索結果でどのように表示されるかをシミュレーションできます。
AMP 対応ページには下の赤枠のように「AMP」のマークが付きます。

構造化データを実装しているページでは、カルーセルでの表示もプレビューしてくれます。
構造化データがないページは、下の段の通常の検索結果でのプレビューだけです。

検索結果のレビュー画面

AMP チェックを行い見つかったエラーを修正した後は、Google に認識してもらわなければなりません。黄枠の「Google に送信」ボタンを押すと、ページを Google のインデックス登録キューに追加することができます。

GoogleにURLを送信

有効ではないAMPページのテスト結果

AMP HTMLの仕様に従っていないときは「有効なAMPページではありません」と表示されます。修正が必要な箇所を指摘してくれるので、そこを直します。

AMPエラー画面

その他の AMP テストツールについては、こちらを参照してください。

AMPページの有効性を検証する3つの「AMPテスト」ツールの活用法
AMP ページの有効性を検証する3つの AMP ツール AMP ページが Google 検索に表示されるためには、そのページが正しく実装さ...
スポンサーリンク
wp_レクタングル (大)
wp_レクタングル (大)
☆最後までお読みいただきましてありがとうございます。
☆この記事がお役に立ちましたらシェア・フォローしていただけると嬉しいです!

シェアする

フォローする