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

『WordPressの教科書』WordPress 3.8日本語版対応情報

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

本書の動作検証について

本書の動作検証はWordPress 3.3日本語版およびWordPress 3.4/3.5/3.6/3.7/3.8日本語版で行っており、本文中ではすべて「3.3日本語版」として記述しています。

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

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

ライブプレビュー機能について

「ライブプレビュー機能」は、WordPress 3.4から導入された新機能の一つです。

管理画面>「外観」>「テーマ」の「利用可能なテーマ」のリンク「プレビュー」(WordPress 3.3以前)が、WordPress 3.4以降では「ライブプレビュー」となっています。

この「ライブプレビュー」リンクをクリックすると詳細なプレビュー画面が表示されます。

なお「ライブプレビュー機能」は、プラグイン「Admin SSL」有効時にうまく動作しない場合があること確認しています。ライブプレビュー機能を使用したい場合には、いったんAdmin SSLを停止してください。

「add_custom_image_header」と「add_custom_background」について

本書で使用しているWordPress関数「add_custom_image_header」(および本書では未使用の「add_custom_background」)は、WordPress 3.4から非推奨となっています。

「add_custom_image_header」(および「add_custom_background」)は、引き続きWordPress 3.8日本語版で使用しても、Webサイトの表示・動作上、特に問題はありません。ただしデバッグモード等にしていると「非推奨」の旨が表示されます。

本書でデバッグモードにしたときなどに「非推奨」の旨が表示されないようにしたい場合には、functions.phpとheader.phpを以下のように書き換えてください。
※以下の記述はWordPress 3.4以降の記述です。WordPress 3.3日本語版で適用するとエラーで停止しますので注意してください。

functions.php
(P.57のfunctions.phpを下記「修正後」に置き換えて進めてください。)

修正前
// カスタムヘッダー
add_custom_image_header('', '__return_false');

define('NO_HEADER_TEXT', true);
define('HEADER_TEXTCOLOR', '');
define('HEADER_IMAGE', '%s/images/top/main_image.png');
define('HEADER_IMAGE_WIDTH', 950);
define('HEADER_IMAGE_HEIGHT', 295);
修正後
// カスタムヘッダー
add_theme_support(
    'custom-header',
    array(
        'width' => 950,
        'height' => 295,
        'header-text' => false,
        'default-image' => '%s/images/top/main_image.png',
        'admin-head-callback' => '__return_false',
    )
);

header.php
(P.59のheader.phpを下記「修正後」に置き換えて進めてください。)

修正前
    <section id="branding">
      <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
    </section><!-- #branding end -->
修正後
    <section id="branding">
      <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
    </section><!-- #branding end -->

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

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

管理画面デザインの変更

WordPress 3.8から管理画面が大幅にリニューアルされました。本書のスクリーンショットとはデザインが異なりますが、項目等についてはおおむね変更ありませんので、そのまま進めてください。

デフォルトテーマの変更

WordPress 3.8からデフォルトテーマがTwenty Fourteenに変更になりました。また、WordPress 3.7からはTwenty Elevenが同梱されなくなれましたので、P76で記事の確認を行うにあたっては、Twenty Thirteen等を使用して下さい。

ディスカッション設定のコメント表示条件の文言変更

P.189のディスカッション設定のコメント表示条件のメッセージが変更になっています。「管理者の承認を常に必要とする」→「コメントの手動承認を必須にする」となっておりますが、機能としては変わりませんので、読み替えてください。

メッセージと用語の変更

P.276のインストール画面のメッセージなど一部のメッセージが変更になっています。おおむね内容としては同じですので、そのまま進めてください。P.75等のビジュアルエディタの「HTML」が「テキスト」に用語が変更になっています。こちらは読み替えてください。

カスタムメニューの設定画面の変更

WordPress 3.6からカスタムメニューの設定がよりシンプルになりました。内容としては大きな変更はありませんので、P.92-95のキャプチャは読み替えていただければ問題ありません。ただし、P.94の『「+」をクリックするとメニューを追加できます。』は『新規メニューを作成をクリックします。』にP.95の『「テーマの場所」エリア』は『位置の管理タブ』に読み替えて頂きますようお願い致します。

アイキャッチ画像の登録画面(メディアアップローダ)の変更

P.106,107等でのアイキャッチ画像の登録画面(メディアアップローダ)がWordPress 3.5から美しくシンプルなものに改善されています。ファイルを選択してアップロードするか、ドラッグアンドドロップでアップロードした後、アップロードしたファイルを一度クリックしてハイライトしてから、「アイキャッチ画像を設定」ボタンを押して設定して下さい。

「管理画面>設定」の変更

P.173等での「管理画面>設定>プライバシー」とありますが、WordPress 3.5からは、設定メニューが簡素化され、「プライバシー」は「表示設定」に統合されました。従いまして、こちらは、「管理画面>設定>表示設定」に読み替えてください。

コメントフォームのCSSの修正

WordPress 3.5からP.187からのコメント欄の設置で表示されるコメントフォームのHTMLが変更になりました。そのままでも動作しますが、必須項目のアスタリスクの表示位置がずれてしまいます。こちらを修正するには、以下のCSSのコードをテーマディレクトリ(pacific)内のcss/common.cssの587行目の.required宣言ブロックの終了後、input#author,の前に追加して下さい。
label .required {
display: block;
float: none;
margin-left: -1em;
padding-left: 0px;
}

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

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

  • 新しく、モダンな管理デザイン
  • 新しいデフォルトテーマ – Twenty Fourteen

外部サービスの仕様変更等に伴う補足情報について

いくつかの外部サービスの仕様変更に伴う補足情報がありますので、『WordPressの教科書』補足情報をご確認下さい。

コメント

  • 八本さま
    お返事ありがとうございます。
    Firebugの検証ツールは、私もちょうど本を読み返して利用していたところでした。とてもいいものがあるのだと、サイトを作成したときにはよくわかっていなかったので、少し前進した気になっています。引き続き勉強したいと思います。ありがとうございました。

    2014年4月10日 10:25 AM | N.H

    • N.Hさん、ご返信ありがとうございます。
      引き続き、頑張ってください!
      よろしくお願いします。

      2014年4月10日 11:23 AM | 八本理恵子

  • 八本さま
    お手数をおかけしております。
    すべてのCSSを本のソースの通りに一旦UPしなおしてみましたが、フォントとバックグラウンドの色が変わっただけでした。
    後から入れたプラグインのためか、3.8.1へのバージョンUPがよくなかったのか、と思われます。コメントが入力されないとズレがわからなかったので、どのの作業が影響しているのかつかめていません。
    もう少し調べてみようと思います。どうもありがとうございました。

    2014年4月5日 8:12 AM | N.H

    • N.Hさん、ご返信ありがとうございます。
      CSS等で思い通りにいかない場合、意外なところにスタイルの指定があってうまくいかないことも多々あります。
      Firebugなどの検証ツールをお使いいただき、どこが異なっているのかをみてみるのも参考になるかと思います。
      Firebugについては、p.109のコラムに紹介していますので、ご興味がありましたら是非ご覧になってください。
      引き続き、頑張ってください。
      よろしくお願いします。

      2014年4月8日 12:37 PM | 八本理恵子

  • 八本さま、お返事ありがとうございました。h1に戻しました。入力したコメントに対して欄がずれる件についての対策を教えて頂けますか。お手数をおかけしますが、よろしくお願いいたします。

    2014年4月4日 8:29 AM | N.H

    • プライム・ストラテジーの八本です。ご返信ありがとうございます。
      コメント欄についてですが、おそらく、cssに起因するものと思われます。
      ご自身のサイトのcommon.cssと弊社サンプルサイトのcss(http://pacific.prime-strategy.co.jp/wp-content/themes/pacific/css/common.css)
      にあるcommentlist周辺の設定を見比べてみていただくと原因がつかめるかと思われます。
      よろしくお願いいたします。

      2014年4月4日 12:28 PM | 八本理恵子

  • 八本さま、お返事ありがとうございます。
    h1タグをgやg1にしたのは、seo内部対策の指示を外部に発注した際に、h1タグは1ページにつき一つにするよう指示されたからです。h1タグを外すとフォントが小さくなり、そのデザイン上の対応はCSSで調整するように言われ、よくわからないままにgに変換しました。
    本当は、h1タグを外してもデザインは壊さない方法も教えて頂きたかったのですが、本に書いてある通り以外については、サポート外だろうと思いましたので、質問は遠慮した次第です。

    コメント欄が崩れるのは、h1タグに関する作業をするの前からの症状です。本の通りのコードの時からいろいろやってみましたが、直らなかったので、質問させて頂きました。
    それでも、もう一度、h1タグに戻してから、お返事をお待ちした方がよろしいでしょうか。
    お手数をおかけしますが、どうぞよろしくお願いいたします。

    2014年3月31日 7:33 PM | N.H

    • N.Hさま、こんにちは。
      プライム・ストラテジーの八本です。

      gやg1は現状のHTMLタグには存在しませんので、こちらはh1もしくはdivなどに直していただくと良いと思います。
      書籍の内容からは少し外れますが、HTMLにはいくつかバージョンがございまして、XHTMLなどの場合は、h1は一つずついうルールがあります。
      ただし、『WordPressの教科書』は今後主流になっていくHTML5の規格でコーディングされているので、h1を複数入れることも可能となっています。

      お手数ですが、gやg1の箇所を一旦h1に戻していただけますか。

      よろしくお願いします。

      2014年4月2日 9:55 AM | 八本理恵子

  • 「ワードプレスの教科書」でサイトを作りました。
    3.8日本語対応情報に書かれてあるとおりにコメントフォームのCSSを変更しましたが、コメントを入力した際にレイアウトがずれてしまいます。
    環境はMac osX
    ワードプレス3.8.1です。
    対策を教えていただけませんでしょうか。どうぞよろしくお願いいたします。

    2014年3月30日 12:24 PM | N.H

    • N.Hさま こんにちは。
      プライム・ストラテジー株式会社の八本(やもと)と申します。
      ページのソースコードを拝見させていただいたところ、htmlにいくつか誤りがみられました。

      <g> → <h1>
      <g1> → <h1>

      などです。

      http://pacific.prime-strategy.co.jp/archives/77/
      のソースコードをご覧いただき、誤りのある箇所の修正をお願いします。

      よろしくお願いします。

      2014年3月31日 3:46 PM | 八本理恵子

  • […] 今から覚えるなら、WordPressの教科書 WordPress3.8日本語版対応情報に書かれている修正後のコードの方が良いと思います。 […]

    2014年1月11日 9:45 PM | [WordPress学習] カスタムヘッダーを使えるようにする | ごちゃごちゃネット

  • […] されている方がいたらWordPress3.8日本語版対応情報をチェックしてください。 […]

    2014年1月11日 1:34 AM | WordPressをきちんと勉強しようっと | ごちゃごちゃネット

Leave a Reply

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

トラックバックURL

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