処理速度計測中:0.011 sec  ページキャッシュは使用しておりません。
本格ビジネスサイトを作りながら学ぶ WordPressの教科書
2015年07月21日 本格ビジネスサイトを作りながら学ぶ WordPressの教科書

『WordPressの教科書』Ver.4.x対応版 WordPress 4.1日本語版対応情報

このページでは、『本格ビジネスサイトを作りながら学ぶ WordPressの教科書』Ver.4.x対応版に関する、WordPress 4.1日本語版対応情報をお知らせしていきます。『WordPressの教科書』のFacebookページでもアップデート情報などお知らせしていますので、あわせてご利用ください。

本書の動作検証について

本書の動作検証はWordPress 4.0日本語版およびWordPress 4.1日本語版で行っており、本文中ではすべて「4.0日本語版」として記述しています。

本書でWordPress 4.1日本語版を利用する際の留意点

WordPress 4.0日本語版ではなくWordPress 4.1日本語版をダウンロードして利用する際は、以下の点に留意して進めてください。

カスタムヘッダー機能について

カスタムヘッダーの設定画面が変更となり、ライブプレビューによる設定画面に統合されました。この統合により、実際に画像を適用する前にプレビューでの反映確認ができるようになっています。

P.58での画像のアップロードは、「現在のメインイメージ」を「現在のヘッダー」、画像アップロードの「参照」を「新規画像を追加」と読み替えて進めてください。

※ カスタムヘッダーがライブプレビューに反映されるのは、header.phpにテンプレートタグを記述した後となります。

Google +1ボタンページの改訂

P.197 に掲載されている「+1ボタン」ページの内容が改訂され、ページ上でコードの作成を行うことができなくなっています。social-button.php、および social-script.php には、以下のコードをコピーしてペーストしてください。

social-button.php にペーストするコード

<li>
  <div class="g-plusone" data-size="medium"></div>
</li>

social-script.php にペーストするコード

<script type="text/javascript">
  window.___gcfg = { lang: 'ja' };

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Facebook「いいね!」ボタンコードの変更

「Get Code」で表示されるコードの種類が選択できないようになっています。表示されるコードについては 1, 2 の2枠に分かれていますので、以下の通り扱ってください。
1. のコードをコピーして、header.php のbodyタグの直後にペーストします。
2. のコードは、data-width="360" data-href="<?php the_permalink(); ?>" data-show-faces="false"を追加した上で、social-button.php の</ul>の直前にペーストし、liタグで囲ってください。

wp-book_wp41-facebook-lilke-button

header.php

<body <?php body_class(); ?>>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>                                                                                                         <div id="wrap">

social-button.php

<li>
<div class="fb-like" data-width="360" data-href="<?php the_permalink(); ?>" data-show-faces="false"></div>
</li>     

Facebook Like Box廃止に伴う変更

Facebook Like Boxは、2015年6月で非推奨となり、代わりにFacebook Page Pluginを利用することが推奨されています。
Facebook Page Pluginは、Facebook Like Boxとコード作成のページ、および作成されるコードが変更されていますが、ウィジェットの設定方法には変更ありません。コードの生成方法については、以下の手順を参考としていただくと共に、ウィジェットについては、貼り付けるコードを読み替えて進めてください。

あらかじめFacebookページを用意しておきます。

  1. Facebookにログインしてから、次のURLの「Page Plugin」ページにアクセスします。
    Page Plugin
    https://developers.facebook.com/docs/plugins/page-plugin
  2. 「Page Plugin」ページ上で以下のように設定していきます。
    FacebookページのURLを入力します。
    「Width」エリアに「250」と入力します。
    「Height」エリアに「342」と入力します。
    「Show Page Posts」のみチェックを外します。
    最後に「Get Code」をクリックします。
  3. 「Get Code」をクリックして表示された「Your Plugin Code」で、2つ表示される枠のうち、「2. Place the code for your plugin wherever you want the plugin to appear on your page.」下の枠内のコードをコピーします。

Page Plugin のコード例

<div class="fb-page" data-href="https://www.facebook.com/wp.business.book" data-width="250" data-height="342" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/wp.business.book"><a href="https://www.facebook.com/wp.business.book">本格ビジネスサイトを作りながら学ぶ WordPressの教科書</a></blockquote></div></div>

本文中のキャプチャ画像および一部記述について

本文中のキャプチャ画像はWordPress 4.0日本語版とWordPress 4.1日本語版とで若干の差異があります。WordPress 4.0日本語版をWordPress 4.1日本語版に読み替えていただくとともに以下の変更点を参考に進めてください。

デフォルトテーマの変更

WordPress 4.1からデフォルトテーマがTwenty Fifteenに変更になりました。Twenty Fourteenも同梱されていますので、P.277でインストールが完了しましたら「管理画面」>「外観」>「テーマ」でTwenty Fourteenに切り替えてください。

Facebookコメント設置方法に関して

P.207に掲載されているFacebookコメントの設置方法に関して、social-script.phpに挿入するコードは、Facebookいいねボタン設置の際に、header.phpに挿入するコードと同一であり、ページ内に一回のみ存在すれば良いため、ここで挿入する必要はありません。

WordPress 4.1日本語版における主な新機能・変更点

WordPress 4.1日本語版の主な新機能・変更点は以下のとおりです。

  • 新しいデフォルトテーマ – Twenty Fifteen の導入
  • どこでもログアウト
  • 言語選択
  • Vine 動画の埋め込み

コメント

  • WordPressの教科書Ver.4.x2015年3月1日初版発行を購入しサイトの作成中です。246ページのGoogleマップの定義ですが、ダウンロードしたサンプルのchapter9のfunctions.phpのデータにこの分のソースが追記されていないようです。大変長いソースなので、コピペさせてもらおうと思ったのですが、困っています。ダウンロードデータの更新予定はありますか?

    2015年9月3日 6:10 PM | ishiuchi

    • ishiuchiさん、こんにちは。
      ダウンロードデータのsourceフォルダの中にはchapterごとの完成データが入っております。
      STEP9-1で定義しましたショートコードは、次のSTEP9-2でプラグインとして登録するためにfunctions.phpから切り出しmaps-shortcode.phpにペーストしております。そのためP246のfunctions.phpの記述はmaps-shortcodeフォルダ内のmaps-shortcode.phpにありますので、こちらを参考にしていただけますでしょうか。
      よろしくお願いいたします。

      2015年9月11日 10:49 AM | 佐野美和

Leave a Reply

Your email address will not be published. Required fields are marked *

トラックバックURL

https://www.prime-strategy.co.jp/wp/4744/trackback/