Twenty Fourteen-WordPress-headerとfooter

Google+ Pinterest LinkedIn Tumblr +

個人BLOGのWordpressのテーマTwentyFourteenをカスタマイズしていく

前回は先ず準備編として子テーマの設定をしました。今回は

header.phpにOGP設定とfooter.phpのコピーライト

テーマ2014-2

ogp

OGPの設置方法は自分でコードを書くもしくはOGPを書き出してくれるプラグインを使うなど手段はお好みでよいとおもう。

私の場合は直接<meta>を手作業で書き込むようにしている。

そこで、こういうコードを見たことがあるのではないでしょうか。

私も以前はこのように記述していました。

<html <?php language_attributes(); ?>  xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

xmls:og xmls:fb と言う記述

この部分はこのサイトをリニューアルして以降は以下のようにしている

<html <?php language_attributes(); ?> prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# <?php if(is_front_page()){ echo ' website: http://ogp.me/ns/website#'; }else{ echo ' article: http://ogp.me/ns/article#'; } ?> ">

html5で書かれるソースコードにxmlsというのはしっくりこないというのがあり、いろいろ調べまわったところ

どうやらこの記述はなくても構わない。という情報や、Facebookのデベロッパー向けのコンテンツが更新されていたり、正直言って何が正しいのか?

なにかしらの問題がなければOKということで、自分が納得しているものにしている。

Facebookのドキュメントは、書き換わっていて該当部分を参照できないのですが、和訳されたWEBページがあったのでご参考に。

Facebook開発者向けドキュメントの日本語訳とTips
 

copyright

footer.phpのコピーライト部分

<div class="site-info">
				<?php do_action( 'twentyfourteen_credits' ); ?>
				<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyfourteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyfourteen' ), 'WordPress' ); ?></a>
			</div><!-- .site-info -->

ここを以下のように変更

			<div class="site-info">
				© 2012 - <?php echo date('Y '); bloginfo('name'); ?><a href="http://beam.co.jp" title="YoshiharaLaB" target="_blank">[ Yoshihara.Mitsuru ]</a> All rights reserved.
			</div><!-- .site-info -->

以前のテーマに比べるとアイキャッチを設定してない投稿があること、サムネイル画像のサイズもテーマと合ってないということもあり、今の状態で公開してもいいのもか?とも思いましたが、徐々に変えていくのもいいかな。

最低限のOGPとコピーライトだけは書き替えてテーマを切り替えてみました。

プラグインの調子がわるかったり、ウィジェットの動きが何となくおかしかったり。と、いろいろと不具合も出たりと、納得するものではないですが、先ずは切り替えて公開。

こちら個人サイトのテーマをカスタマイズ中です。

追記**

google+のバッジを設置している場合には

header もしくは footerファイルに以下のスクリプトを忘れずに。

以前のテーマのままウィジェットにあるのに表示されないので、なぜだろ?と思っていたら忘れていました。

私はfooter.php の </body>前、<?php wp_footer(); ?>の後に入れています。

	<?php wp_footer(); ?>
<script type="text/javascript" src="https://apis.google.com/js/platform.js">
  {lang: 'ja'}
</script>

失敗失敗。

コードなどのご確認はGoogleのデベロッパーページでご確認ください。

Share.

Leave A Reply