AMPに対応した時に、Table of Contents Plusで作成される目次をきれいにするための方法です。
目次を作成するためのプラグインとして、Table of Contents Plus(TOC+)を使っている人は多いと思います。しかし、AMPに対応すると、せっかくの目次の見た目が残念な感じになってしまいます。今回は、それを簡単な方法で修正します。

TOC+用にAMPのCSSを追加

このコードをコピーして、AMPのCSSに追加するだけ。以上!なのですが、下の方で少しだけ詳しく解説します。

#toc_container ul,#toc_container li {
	margin:0;
	padding:0;
}

#toc_container.no_bullets ul,
#toc_container.no_bullets li,
#toc_container.no_bullets ul li,
.toc_widget_list.no_bullets,
.toc_widget_list.no_bullets li {
	background:none;
	list-style-type:none;
	list-style:none;
}

#toc_container.have_bullets li {
	padding-left:12px;
}

#toc_container ul ul {
	margin-left:1.5em;
}

#toc_container {
	background:#f9f9f9;
	border:1px solid #aaa;
	padding:10px;
	margin-bottom:1em;
	width:auto;
	display:table;
	font-size:95%;
}

#toc_container.toc_light_blue {
	background:#edf6ff;
}

#toc_container.toc_white {
	background:#fff;
}

#toc_container.toc_black {
	background:#000;
}

#toc_container.toc_transparent {
	background:none transparent;
}

#toc_container p.toc_title {
	text-align:center;
	font-weight:700;
	margin:0;
	padding:0;
}

#toc_container.toc_black p.toc_title {
	color:#aaa;
}

#toc_container span.toc_toggle {
	font-weight:400;
	font-size:90%;
}

#toc_container p.toc_title + ul.toc_list {
	margin-top:1em;
}

.toc_wrap_left {
	float:left;
	margin-right:10px;
}

.toc_wrap_right {
	float:right;
	margin-left:10px;
}

#toc_container a {
	text-decoration:none;
	text-shadow:none;
}

#toc_container a:hover {
	text-decoration:underline;
}

.toc_sitemap_posts_letter {
	font-size:1.5em;
	font-style:italic;
}

対応方法の解説

対応前のAMPページの目次

プラグインでAMPに対応した直後の目次はこんな感じになります。ただの箇条書きになってしまい、デザイン的にいまいちになってしまいます。

対応方法の詳細:コピーするCSSは何なのか?

実は、上に記載しているCSSはTOC+のプラグインにあるコードをそのまま持ってきたものです。

  1. プラグイン→インストール済みプラグイン、を開く
  2. Table of Contents Plusの「編集」をクリック
  3. プラグインファイルから「table-of-contents-plus/screen.css」をクリックして中身をコピー
  4. コピーした内容をAMPのCSSに追加する
    (AMP for WPを使っている場合は、DesignのCustom CSSに貼り付けるだけ)

とすれば対応は完了します。

上に記載してあるコードが手順3のものなので、コピーして手順4をやるだけで対応完了、となります。

※少しでも容量を抑えたい場合は「table-of-contents-plus/screen.min.css」の方をコピーして下さい。

 対応後のAMPページの目次

対応するとこのようになり、いつものTOC+による目次とほぼ同じ見た目になります。この対応を行うだけで、AMPページのいまいち感がかなり解消されますので、対応をオススメします。

TOC+による特殊なAMPエラー対応(おまけ)

AMPとTOC+でもう一つ、厄介な問題が発生する場合があります。それは、タイトルに英字として「AMP」だけが入っている場合に、AMPページがエラーになってしまう、という問題です。例えば、

  • AMPとは
  • AMPのメリット

などを見出しに使うと、TOC+によって自動的に

<span id=”AMP”>

というコードが自動挿入されてしまうため、これがエラーになってしまいます。
WordPressをプラグインで簡単にAMP対応。サイトを超高速化させる方法」を投稿した直後にエラーが発生して、あわてて調べたらTOC+のせいだった、というオチで気付きました。

回避策1:半角にAMPだけが含まれる見出しを作らない

回避策として簡単なのは、AMPを全部全角にしてしまう、です。

  • AMPとは
  • AMPのメリット

にすればエラーにはなりません。

回避策2:問題になっているコードを自動的に置換(上級者向け)

function.phpに下記を追記する事で、エラーにならないようにできます。

function convert_toc_to_amp ($the_content) {
  $pattern = '/<span id="AMP">/i';
  $append = '<span id="AMP-1">';
  if(preg_match($pattern,$the_content,$matches)){
    $the_content = preg_replace($pattern, $append, $the_content);
  }
  return $the_content;
}
add_filter('the_content','convert_toc_to_amp', 9999);

補足:このコードは、MORIAWASE:AMPページの目次が原因でエラーに!見出しに「AMP」はダメ?を参考にさせて頂いた上でコードを修正しています

以上。AMPのための追加対応としてTOC+に関する調整の色々、でした。

Pocket

スポンサーリンク


スポンサーリンク


関連記事

WordPressをプラグインで簡単にAMP対応。サイトを超高速化させる方法... モバイルページを「超」高速化できるAMP(Accelerated Mobile Pages)に、WordPressのプラグインを使って、簡単に対応するための方法...
エックスサーバーの設定を変えてWordPressをたった5分で高速化... エックスサーバーはサーバーパネルから色々な設定を変更したりできますが、その一部の設定を変更するだけでサイトをいきなり高速化する事ができます。たった5分で出来てし...
WordPressを独自ドメインで立ち上げるためのメモ... 新規のサーバー契約、独自ドメイン取得、WordPressの設置まで、これまでに実施した主な対応の簡単なメモです。新規にサイトを立ち上げる方にとっては、このメモが...
WordPressに広告を自動挿入するプラグインはAd Inserterがおすすめ... WordPressに広告を出すためのプラグインとしてAd Inserterがおすすめです。 よくできているテーマでは、広告を出すための枠が事前に色々と用意...
WordPressのバックアップはUpdraftPlusがオススメ!そのバックアップは簡単に復元できますか?... WordPressのバックアップのためのプラグインはBackWPupよりもUpdraftPlusをオススメします。オススメする一番の理由は、復元が非常に簡単な事...
PV数の報告はAdSenseの利用規約違反?他には何がダメなの?... PV数の報告はダメ、という事をたまに目をしますが、何でダメと言われているのでしょうか?根拠を探してみたので、他のAdSenseでNGとされている事項も合わせて、...

ブログランキング参加中(クリックお願いします)

にほんブログ村 株ブログ インデックス投資へ

スポンサーリンク