LINE ボタン追加とちょっとだけ仕様変更 WpTHK 3.03

2016年11月11日

要望があったので、とりあえず、
「LINE で送るボタン」と「LINE フォロー」のボタン追加しました。

  • 画面サイズ 992px 以上は、PC でも使える新仕様版の LINE ボタン
  • 画面サイズ 991px 以下は、スマホのラインアプリで使える旧仕様の LINE ボタン

が表示されます。

注意事項： 子テーマで LINE のアイコンを表示するには 子テーマ 3.01 が必要です。
fonts/ だけ差し替えれば大丈夫です。

あとは、
HTML5 の構造で気に食わん部分があったので、ちょっとだけ仕様変更

↓ ver3.02 までの構造

<header>
	サイト名などなど
	<nav>
		グローバルナビ
	</nav>
	ヘッダー上の帯メニュー
</header>

↑ この構造が気に食わんので

↓ こーなるように変更

<header>
	サイト名などなど
	<nav>
		グローバルナビ
		ヘッダー上の帯メニュー
	</nav>
</header>

この変更で、ヘッダー上の帯メニューも schema.org の SiteNavigationElement に入れられるようになったので、構造的にかなり良くなった。

あとは、ヘッダー帯メニューとウィジェットのフォローボタンの A タグは全て schema.org で

itemprop="sameAs url"

を付けるようにしました。

sameAs を付けることによって、検索エンジンに、例えば「リンク先の Facebook のページは自分のブログと同じ内容やプロフィールが書かれてるよ」ってことを伝えることができます。

以下、改訂履歴

機能追加

  1. SNS シェアボタンに「LINE で送る」ボタン追加
  2. ヘッダー帯メニューと SNS フォローボタンウィジェットに LINE のフォローボタン追加

仕様変更

  1. ヘッダー上の帯メニューをグローバルナビと同じ <nav> ( SiteNavigationElement ) 内に入るように変更
  2. 上記にともない、ヘッダー上の帯メニューの項目にも以下を付与
    • itemprop="name"
    • itemprop="url"
  3. フォローボタンの A タグに itemprop="sameAs url" 付けるようにした。
  4. モバイルメニューの項目は、ソース上、本体メニューの下にくるように変更
  5. 検索結果のハイライト用 Javascript を1つに結合して、検索時の HTTP リクエストを削減するようにした
  6. カスタマイズの組合せによって、検索結果の表示が何となく微妙というか、気に食わんかったので、見た目一部変更
  7. グローバルナビに枠線をつけると、グローバルナビの幅設定によっては、下に白線が出てしまったり、枠線のサイズが合わない等の現象が発生するため、CSS 調整
  8. SNS シェアボタンのレスポンシブの見た目少し調整変更

バグ修正

  1. 「バッファリングの逐次出力を有効にする」に設定しても、ヘッダー部分が逐次出力になってなかったバグの修正（かなり前のバージョンからレベルダウンしてた模様）
  2. 子テーマ CSS によっては、実際のブログとカスタマイズプレビューの見た目が合わなくなってしまうことのあるバグの修正
  3. 記事下の SNS シェアボタンだけが「通常ボタン」だった場合に、Facebook と LinkedIN のボタンが反応しない?(かもしれない)バグの修正
  4. SNS フォローボタンウィジェットの Youtube ボタンの ID が Goolge+ の ID になってたバグの修正
  5. 固定ページをフロントページにしていて、且つ、記事下のメタ情報を空っぽに設定してる場合、記事タイトルと SNS ボタンが重なって表示されてしまうので CSS 修正
  6. jQuery を非同期に設定してると、検索結果がハイライト表示にならないバグの修正

WpTHK

Posted by るな