なので、痛い目を見る前に、、、素人でも十分活用できる最低限の知識をまとめておきたいと思います。ぼく自身はワードプレスの知識も PHP の知識もない中手探りで使い出しました。HTML や CSS の当然わからりませんでした。それでも必要と思われる情報は全てネットで調べ、実際に触ってみる中で、ある程度体系化された状態で WordPress を理解するに至りました。
別にウェブデザイナーなどの専門家を目指すわけではないぼくたちに必要な最低限の理解を得ることができると思います。
まず始めに、これはどんな人のためのものか？
前述のように、WordPress や PHP などの専門性を高めたいと思っている人のものではありません。WordPress を使ってネットでの集客やセールス力をアップさせたいと思っている社長・起業家、個人事業主、マーケターやウェブ担当者のためのものです。
目的はあくまで売上アップ。そのために必要なカスタマイズが出来る程度に WordPress を活用できればいいと考えている人のためのものです。
また、ある程度知識のある玄人向けのものでもありません。WordPress を使い始めた方。WordPress を今まで何となくで使ってきた方。PHP に関して全然知識のない方のためのものです。
加えて、ウェブサイトの基本である、HTML や CSS の知識はある程度あることを前提に進めていきます。
では、早速いきたいと思います。
まずはWordPressにおける PHP の機能的な役割について
正直 PHP の本質を理解しているとは思ってませんが、ぼくがイメージしているのはこんな感じです。
サーバー上にある段階では、PHP ファイルはあくまでもレシピや材料としてだけの存在です。
実際にぼくたちが見ているウェブサイト（PHP で作られた WordPress などのサイト）は、ぼくたちがアクセスするまで基本的に存在していないようなものです。注文するまでは料理が出てこないのと一緒です。ぼくたちがアクセスして初めて、ウェブサイトとして形作られます。
オムライスが食べたい！（トップページが見たい）と注文（アクセス）すると、コックさん（これは何に該当するだろうか？）がレシピ（PHP で書かれた指示内容）を元に必要な材料（ヘッダー・本文・サイドバー・フッターなどの PHP ファイル）を揃え、オムライスとして調理・盛りつけ（CSS などでのレイアウト・デザインの構成）をして、ぼくたちの前に運ばれてきます（HTML ウェブサイトの表示）。
アクセスされる度に 1 回 1 回 HTML サイトを構成している・吐き出している、みたいな説明をよく見かけますが、それはつまり、ぼくたちがアクセスして初めて HTML ウェブサイトが構成されているわけです。
だからこそ、アクセスした人や表示するページなどの条件によって、細かくコンテンツを変えていくことができるわけですね（1 ページ目はヘッダー画像を表示するが、2 ページ目以降は表示させない、とか）。そして、そのために表示が遅くなる、というのがデメリットでしょう。
こういった作業をサーバーとやり取りしたりとか、なんかよく分かりませんが複雑なことをしているようですが、イメージとしてはこんな感じだと思います。
WordPress テーマの構造を PHP 的に把握する
WordPress のテーマファイルを覗いてみると、主に 2 種類の PHP ファイルがあります。この 2 つのタイプのファイルの関係性を把握しておけば、どこをカスタマイズしたらどう変化するのか、希望通りのカスタマイズをするためには、どこを変更したらいいのか、ということが分ってくるようになります。
その 2 つのタイプとは、
・ウェブサイトの材料となる PHP
WordPress のテーマで具体的に見てみると、以下のようなファイル名で分類できます（Twenty Thirteen のファイルを参考にしていますが、他もほぼ同じのはずです）。
- index.php（フロントページ）
- single.php（投稿ページ）
- page.php（固定ページ）
- tag.php（タグの検索結果一覧ページ）
- category.php（カテゴリーの検索結果一覧ページ）
・・・などなど。
- header.php（ヘッダー部分）
- content.php（コンテンツ部分）
- sidebar.php（サイドバー部分）
- comments.php（コメント部分）
- footer.php（フッター部分）
・・・などなど。
レシピの具体例
例えば、こちらの【 single.php 】というファイルを開くと、以下のようになっています。
<?php /** * The template for displaying all single posts * * @package WordPress * @subpackage Twenty_Thirteen * @since Twenty Thirteen 1.0 */ get_header(); ?> <div id="primary" class="content-area"> <div id="content" class="site-content" role="main"> <?php /* The loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', get_post_format() ); ?> <?php twentythirteen_post_nav(); ?> <?php comments_template(); ?> <?php endwhile; ?> </div><!-- #content --> </div><!-- #primary --> <?php get_sidebar(); ?> <?php get_footer(); ?>
結構内容はスカスカで簡単そうに見えますよね。どういう材料をどういう順番で、どういう条件で表示させるかが書かれています。
ざっくりと、1 〜 10 行目までがヘッダー、12 〜 25 行目までがコンテンツ、27 行目がサイドバー、28 行目がフッターの順番で構成されています。そしてヘッダーの部分は【 header.php 】を呼び出します。
吐き出す、と言った方が正しいですかね。。。同じようにサイドバー部分は【 sideber.php 】、フッター部分は【 footer.php 】を吐き出します。
コンテンツ部分はちょっと複雑になってます。【 single.php 】は比較的シンプルですが、他のレシピ系のファイルを見るとこの部分は条件分岐タグなどを用いて、色々な条件によって表示方法を変えられるようになっているみたいです。
材料の具体例
一方、材料となるファイルの例として【 header.php 】を見てみましょう。
<?php /** * The Header template for our theme * * Displays all of the <head> section and everything up till <div id="main"> * * @package WordPress * @subpackage Twenty_Thirteen * @since Twenty Thirteen 1.0 */ ?><!DOCTYPE html> <!--[if IE 7]> <html class="ie ie7" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8]> <html class="ie ie8" <?php language_attributes(); ?>> <![endif]--> <!--[if !(IE 7) & !(IE 8)]><!--> <html <?php language_attributes(); ?>> <!--<![endif]--> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width"> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script> <![endif]--> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="page" class="hfeed site"> <header id="masthead" class="site-header" role="banner"> <a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1> <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2> </a> <div id="navbar" class="navbar"> <nav id="site-navigation" class="navigation main-navigation" role="navigation"> <button class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></button> <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?> <?php get_search_form(); ?> </nav><!-- #site-navigation --> </div><!-- #navbar --> </header><!-- #masthead --> <div id="main" class="site-main">
こちらも色々複雑な感じがしますが、実は PHP の理解というより、HTML の理解の方が必要です。めっちゃ単純化すると、、、以下のような基本的な HTML サイトの構造になっていることが分かります。
<html> <head><!-- 21行目 --> <title></title><!-- 24行目 --> </head> <body><!-- 33行目 -->
そして、【 footer.php 】を見てみると分かるんですが、</body> や </html> があって、ちゃんとサイトが閉じられた構造になっていることが確認できます。
また、ところどころに PHP タグが見られるのは、決まった情報を呼び出すための便利なタグとして使われています。
例えば、24 行目に <title> タグで挟まれた PHP タグを見つけることができると思います。通常、HTML だけで書いたサイトは、ここにタイトルを書くわけですね。テキストで。それがサイトのタイトルとして認識され、SEO 上も重要視されるわけです。
ですが、WordPress を始め、CMS ではこのタイトルを管理画面側で設定しますよね。直接 PHP ファイルに書き込んだりはしません。管理画面側からいつでも変更ができます。
つまり、このタグが管理画面で設定したタイトルを、この場所に吐き出してくれる、というわけです（アクセスすると、タイトルが文字として認識される）。
他にも、ブログの URL を吐き出してくれるタグや、ブログの投稿者名を吐き出してくれるタグとか、たくさんあります。
むしろ重要なことは、どんな HTML 構造になっていて、id や class などのセレクタは何と指定されているのか、というようなことを把握することでしょう。これを確認できるようになっておけば、スタイルシートのどの部分を変更すれば、デザインやレイアウトを変えられるのか、予想がつきますからね。
サイトの構造を把握するための便利な目印
HTML でページをつくる時は、1 つのファイルに <html> から <head>、その中の meta 情報、<body> と、全てを盛り込んで作っていきますよね。なので分かりやすいとは思います。ですが、WordPress はパーツごとにファイルが異なります。なので、全体の構成を把握するには、複数のファイルを確認しないといけません。
そこで、目印になるのが補足説明。これです。
</div><!-- #primary -->
Twenty Thirteen や、WordPress のデフォルトテーマシリーズには必ず似た様な表記があります。これは、基本タグを閉じる部分に書かれています。上でちょっと説明したように、【 header.php 】に書かれている <body> タグは、【 footer.php 】の中の </body> タグで閉じられています。
同じように、<div id=”＊＊＊”> みたいに始まる要素が、別のファイルで閉じられている場合があります。同じファイル内で閉じられていたとしても、ごちゃごちゃしているので見つけにくくなっています。
そこで、上記の様な補足説明の出番です。例に上げた説明書きは、</div> で閉じられていますよね。そして、#primary と書かれている。つまり、「<div id=”primary”> から始まる部分はここまでです」という意味になります。
これを理解しておけば、複雑でごちゃごちゃした WordPress のテーマファイルでも、なんとなく構成や、何が書かれているかを予想することができると思います。
あとは、ブラウザでソースコードを表示させたり、Firefox の Firebug などのアドオンを使って、サイトを分析すれば、だいぶ理解できるんじゃないかと思います。
まとめ：結局は HTML で好きなようにカスタマイズできる
では、ここまでの長い話をどのように活用すればいいのでしょうか？ それは、構造の把握にあります。結局のところ、ウェブサイトは HTML で書かれていて、レイアウト・デザインは CSS によって決められています。なので、何か追記したい、デザインを変えたいと思ったときは、基本的に HTML と CSS で対応可能です。
ただ、どこに追記したら、サイトのどのページのどの部分に表示されるのか？ もしくは、固定ページを変更したいが、どのファイルを変更したらいいのか？ ということが分かりにくいので、このような話をしました。
この PHP についてのイメージを持っておけば、かなりカスタマイズの自由度が高まると思います。ぜひ参考にしてみてください。
そして、WordPress エディタを使えば、画像を挿入した後で簡単に配置や大きさの変更、スタイルシートでの細かな指定やリンク設定などが行えます。その方法についてまとめたいと思います。
ビジュアルエディタを使用します。ビジュアルエディタ上では挿入済みの画像がそのまま表示されています。この挿入済みの画像をクリックすると、左上に２つのアイコンが表示されます。この内、右側の赤丸は削除。左側の写真のアイコンをクリックすると編集ができます。
すると以下のような編集用のウィンドウが表示されます。
このウィンドウには基本の設定ができる「画像の編集」と、細かい設定ができる「詳細設定」の２つのメニューがあります。まずは、基本となる「画像の編集」から……
画像の編集でできること
画像の編集でできることは、基本的に画像を挿入する際に設定したことと同じです。画像挿入の際に設定し忘れたことや、設定を変えたいと思ったことなどは、こちらで後から変更できます。
(1) サイズ変更
イメージサイズを縮小することができます。割合で選べるようになっています。ここで変更するよりは、【詳細設定】の画面を開いて変更した方が、横幅と高さを実際の数値で確認できるので分かりやすいです。
(2) 配置
画像の配置を変更できます。「なし」だと文字と同じように左詰めになります。「左」や「右」は回り込みです。CSS で言うと float が適用されています。「中央」はその名の通り真ん中配置になります。【 style=”text-align: center;” 】が適用されます。配置はプレビューでも確認できます。
HTML 上で、配置はどのように指定されているか？
例えば Twenty Eleven の場合は、画像の配置を左に指定すると、ここに【 alignleft 】という class が追加されます。スタイルシートで【 .alignleft 】を探してみると【 float: left; 】となっているはずです。つまり、イメージタグに直接【 style=”float: left;” 】と記述して回り込ませているわけではなく、スタイルシート側で用意している回り込みスタイルを class を使って指定しているわけですね。
・左に配置した場合
<img src="画像URL" class="alignleft" />
・Twenty Eleven のスタイルシート
.alignleft {
display: inline;
float: left;
margin-right: 1.625em;
}
(3) タイトル
デフォルトでは、画像のファイル名がタイトルになっています。このタイトルに記載した内容は、ブラウザ上で画像にカーソルを合わせた場合に表示されます。個人的にここを変更したことはありません。SEO 的にも重要ではないみたいです。
<img src="画像URL" title="タイトル" />
(4) 代替テキスト
SEO 的にも重要な alt 属性です。目的は、画像が表示されなかった場合に替わりにテキストを表示させることです。また 検索エンジンのロボットなどに、画像の内容を分からせるためのものなので、SEO 的にも重要だとされているわけです。ここには、画像の内容を伝えるテキストを記載する必要があります。
<img src="画像URL" alt="画像の説明" />
(5) キャプション
画像にキャプションが付きます。キャプションというのは、説明書きです。キャプションはショートコードで追加されます。ショートコードを使うと、あらかじめ指定したものを、簡単なコードを記述するだけで表示してくれます。
(6) リンクURL
画像にリンクを貼ることができます。別ページへのリンクを貼るのは OK ですが、画像の URL をそのまま残すのはユーザビリティを損なうのでやめときましょう。
画像を拡大させたい時も、画像をポップアップ表示してくれるプラグインなどを併用することをオススメします。そうすると、いちいち画面が切り替わらないので。。。
<a href="リンクURL"><img src="画像URL" /></a>
画像の詳細設定の使い方
詳細設定の方では、細かい大きさの設定やスタイルの設定などができます。
(1) 画像のサイズを調節する
これは基本の編集画面と同じですが、【詳細設定】の画面では幅と高さが数値として表示されます。割合を選ぶとここの数値が自動的に変わります。
割合だけで変更すると実際にどのくらいのサイズになるかイメージがわきにくいので、実際のサイズを数値で確認しつつ変更すると分かりやすいです。また、割合ではなく実際にサイズを指定して変更することもできます。
<img src="画像URL" width="幅" height="高さ" />
(2) クラスを指定して、外部 CSS のスタイルを指定できる
class を追加することができます。class はあらかじめスタイルシート側で指定しておく必要があります。
<img src="画像URL" class="クラス名" />
(3) スタイルで画像の CSS を追加できる
style を追加することもできます。ボックスの中に入力するのは、指定したいスタイルシートの部分のみです。例えば画像の周りをボーダーで囲みたい時は、【 border: 3px solid #cccccc; 】などのように入力します。
<img src="画像URL" style="ソースコード上でここに表示させたい内容を入力" />
画像をに border のスタイルを適用する場合
例えば、イメージをボーダーで囲みたい場合は、、、
と記述すると、このようになります。
ソースコードを見てみると、このようになっています。
<img src="画像URL" style="border: 3px solid #333333;" alt="alt属性" width="300" height="200" />
(4) 枠線・余白の数値は簡単に設定できる
(3) では任意のスタイルを指定することができますが、枠線の太さ、余白（マージン）については、ここで簡単に指定できます。数値を指定すると、(3) のスタイルの部分に該当するスタイルが自動的に記述されます。
例えば、【上下余白】に【 10 】と入力すると、【 margin-top 】と【 margin-bottom 】に 10px ずつ余白ができます。
詳細リンク設定
ここでは画像にリンクを指定した際の細かい HTML タグを設定できます。
(5) リンクタイトル
タイトル属性を指定できます。
<a href="リンク先URL" title="リンクタイトル"><img src="画像URL" /></a>
(6) リンク rel
rel 属性を指定できます。
<a href="リンク先URL" rel="rel 属性値"><img src="画像URL" /></a>
rel 属性はリンク先のリソースとの関係を表すもので、以下のようなものがあります。
| alternate | 代替バージョンとなる文書 |
| stylesheet | 外部スタイルシート |
| start | 最初の文書 |
| next | 次の文書 |
| prev | 前の文書 |
| contents | 目次 |
| index | 索引 |
| glossary | この文書で使用されている用語集 |
| copyright | 著作権について書かれた文書 |
| chapter | 章 |
| section | 節 |
| subsection | 項 |
| appendix | 付録 |
| help | ヘルプのある文書 |
| bookmark | ブックマーク集 |
(7) CSS クラス
リンクに class を指定することができます。
<a href="リンク先URL" class="クラス" ><img src="画像URL" /></a>
(8) スタイル
リンクに style を指定することができます。
<a href="リンク先URL" style="スタイル" ><img src="画像URL" /></a>
(9) リンクターゲット
リンク先を別ウィンドウで開くか、同じページで開くか指定できます。チェックを入れると、リンクタグが以下のように変更されます。
<a href="リンク先URL" target="_blank" ><img src="画像URL" /></a>
]]>
記事投稿エディタ上から画像をアップロードする手順
メディアの追加方法を順を追って説明します。
(1) メディアを追加したい位置にカーソルを合わせ、「メディアを追加」をクリック
エディタの左上にある「メディアを追加」というボタンをクリックします。
するとこのようなメディア挿入のためのフロー画面が表示されます。
(2) ローカルからファイルをドラッグ&ドロップする（もしくは選択する）
開かれた画像アップロードのフロー上にファイルをドラッグ&ドロップします。フロー上であれば、どんなメニューを開いていても構いません。「ファイルをアップロード」というページでも、「メディアライブラリ」というページでも、「URLから挿入」というページでもOKです。ファイルをドラッグすれば青色に変わり反応してくれます。
※ちなみに、ファイルサイズを超えない限り、複数のファイルを一気にアップロードすることができます。アップしたい画像ファイルを複数選択し、まとめてドラッグ&ドロップすればOKです。
(3) 挿入したい画像にチェックを入れ、必要事項を設定
画像を挿入するに当り、配置や alt、リンクの設定ができます。
代替テキスト
HTML で言うところの alt 属性のことです。何らかの理由で画像が表示されなかった場合に、代わりに表示されるテキストです。このテキストは画像の内容を説明するものにしましょう。画像の内容を理解できない検索エンジン側にも、画像の内容を読み取ってもらうために、つまり SEO のためにも必ず設定してください。
配置
「なし」の場合は左寄せになります。「左」は左への回り込み（CSS では float: left;）、「右」は右への回り込み（CSS では float: right;）、「中央」はその名の通り中央配置になります（回り込みはありません）。
ちなみに、この画像は「左」を選択して回り込ませています。
リンク先
画像にリンクを挿入することができます。設定すると、イメージタグがリンクタグで囲まれます。
リンク挿入に関しては注意したい点があります。なるべくここはリンク「なし」にして、とりわけ画像そのものの URL はリンクさせないようにしましょう。
リンクが貼ってあると、画像をクリックした際にその画像のみが表示され、ユーザビリティを損ないます。画像の URL をリンクさせる場合は、実際のサイズより小さいサイズで挿入し、拡大表示する必要がある時くらいに限りましょう。
ちなみに、画像を拡大表示させたい場合には、こちらのプラグインが使えます。画像をポップアップ表示してくれるプラグインです。画像ポップアップのプラグインは他にもたくさんありますので、探してみてください。
一方、画像の URL 以外のリンク先を指定する場合は、特に気にせず自由にリンクさせて OK です。以前過去記事でも書いていますが、
リンク URL を指定するなら
- 画像をより拡大表示して見てもらいたい場合
- 別のページへ誘導する明確な目的がある場合
に限定して、それ以外は空欄にして何もリンクさせないようにしておきましょう。
ということを忘れないように。
サイズ
WordPressでは、画像をアップロードすると複数のサイズの画像が自動的に生成されます（サーバーの upload フォルダを見ると複数サイズの画像ファイルが確認できます）。
選択肢にはサムネイルサイズ、中サイズ、フルサイズのだいたい３つが表示されているようです。元サイズが大きい場合は大サイズという選択肢が表示される場合もあります。
このサイズの基準は、【設定】＞【メディア】で変更が可能です。また、ここで選べる選択肢以外にも、後ほどサイズを調節することもできます。
(4)「投稿に挿入」をクリック
以上の設定をした上で、「投稿に挿入」をクリックします。すると指定した画像が実際にエディタ上に表示されるはずです（ビジュアルエディタを使用していた場合）。
１度挿入した後も簡単に設定を変更することができます。むしろ、より細かい設定をすることも可能です。画像の編集方法については改めて別の記事で説明したいと思います。
URLを指定して読み込む
外部の画像を読み込んで表示させることも可能です。既に別のサーバーや別のディレクトリ（フォルダ）にアップロードした画像を表示させたい場合には、またアップロードしなおすのは面倒ですし、容量を食うだけです。そこで、既にネット上に上げている画像は、URL指定で使い回しができます。
実際、画像の絶対パスが分かれば、ネット上にあるほぼ全ての画像を表示させることができます。
ただ、他の人の画像の使用は、著作権の問題やその画像が削除されてしまう可能性などを考えるとやるべきではありません。あくまでも自分が所有している画像で、別のサーバーや別のディレクトリ（フォルダ）にアップしている画像を使う際にこの機能を使いましょう。
ただ、クローラーが読みやすいと感じるコンテンツと、人が読みやすいと感じるコンテンツは基本的に共通しています。まずは訪問者・ユーザーさんを意識してコンテンツを作り、クローラーには理解できない部分をクローラー向けの言葉で補足してあげましょう。
1. 結論を最初に持ってくる
これは文章構成テクニックの１つです。最初に結論を持ってきて、その後に理由を持ってくるという……あれです。他にも文章の型はありますので、これにこだわる必要はありません。内容に合わせて効果的な構成を選ぶべきです。
ただ、ウェブコンテンツの場合（特に文章コンテンツの場合）、人だけでなく検索エンジンクローラーも意識した方がいいわけです。なぜなら、検索エンジンクローラーに読んでもらわないとサイトの評価が上がらないからです。
そしてこのクローラー（ロボット／スパイダー）、人間と同じで全文は読んでくれません。冒頭だけ読んでおしまいか、全体を流し読みされておしまいです。それで、「あ〜このページはこんな内容が書いてあるのね〜」と判断してます。
つまり、検索エンジンからのアクセスを見込むなら、大事なキーワードをできるだけ冒頭に持ってくるべきなのです。そのため、結論を最初に言った方が書きやすいでしょ、という話です。
他にも、冒頭で全文の要約をするのも効果的です。「この記事ではこれからこんなこと話しますよ〜」という感じです。また冒頭に目次を用意するのも効果的です。
ちなみに、必ずこうしろという話ではなくて、文章全体の構成を無視してまでこれを徹底する必要はありません。
2. キーワードの使用頻度とか指示語は全てキーワードに置き換えるとかは、とりあえず無視する
こんなことをしている人が未だにいるとは思えませんが、一応注意しておきたいと思います。
結論としては「SEO はほどほどに、SEO には振り回されるな」というスタンスです。検索エンジンがサイトを評価する基準は、結局のところ人間の基準の後追いです。人が見て「そうそう、こんなサイト探してたんだよね〜」という体験を提供できるように、日々アルゴリズムを進化させていっているわけです。
でも、SEO にはグレーな手法やブラックな手法もあり、それで効果が出ることもあります（ありました）。Google 様とはいえ完璧ではないので、どうやら今のところグレーな手法が一番効果的なようですが、長い目で見ると行き過ぎたことはしない方がいいでしょう。
キーワードをたくさん盛り込むというのも、この行き過ぎた SEO のひとつです。単純に、キーワードを意識しすぎると読みにくい文章になります。文章術的には、同じ言葉や言い回しの繰り返しは避けた方がいいので、不自然な文章になってしまうわけです。ですので、キーワードは言い換えを行いながら使用頻度を高めていくのが正攻法です。
人が先にいて、人の判断基準に近づこうとしているのが Google をはじめとした検索エンジンです。だとしたら、訪問者にとって読みやすく、分かりやすいコンテンツであることを意識した方がいいと思いませんか？
3. １コンテンツ最低1,000文字くらいは欲しい
これも明確な基準はありませんが、文章量が少ないと質の低いサイトだと判断され、SEO 的によろしくありません。一説では 2,000 文字〜3,000 文字は必要とも言われています。
じゃあ長ければいいかというとそれも違います。文章量を多くするために無駄な言い回し、無駄な記述を盛り込むべきではないのです。
結局、『おもしろければ読まれ、おもしろくなければ読まれない』というシンプルな原則が働いているだけです。長さは関係ありません。必要な内容であれば省くことはできませんし、無駄な内容であれば省いてよりシンプルに簡潔に表現した方がいいわけです。
結果的に伝わるのであれば、長いより短い方がいいにこしたことはありませんからね。なので、SEO 的な観点のみで最低の文字数だけ意識しておけばいいでしょう。最終的な文字数については、読み手に伝わっているか、読み手がどう思うか、どう感じるかを判断基準にしてください。
確かにネットのコンテンツは集中して読まれにくいとは思います。しかし書籍は何万文字とあります。でも読まれています。電車書籍もしかり。要するに『おもしろいか、おもしろくないか』なのです。
無駄な記述は省く
１ページの文章量が少ないからといって、色々な話題を盛り込むのはよろしくありません。原則『１ページ、１テーマ』です。色々なテーマを扱うと何を言っているのか分かりにくくなります。
ちなみに、文章量が多くて「投稿」コンテンツとしては適切でないなと感じた場合、別の形で公開する方法もあります。例えば PDF にまとめてダウンロードしてもらったり、電子書籍にして無料で公開したりなどが考えられます。
4.見出しを付ける（かつ見出しタグは「２」以降を使う）
見出しは文章にメリハリをつけるためにとても重要です。基本的に、インターネット上のコンテンツはじっくり読まれにくいものです。多くの人は流し読みします。そのため、ところどころでユーザーを本文に引き込むための “キャッチコピー” が必要です。
文章をいくつかのまとまりに分け、それぞれの冒頭で本文に引き込むための見出し（サブヘッドライン/サブキャッチコピー）を持って来るわけです。これで、より文章を読んでもらう確率を上げることができます。理想的にはサブヘッドを読むだけである程度何が書いてあるのか伝わるようにすることです。
また、SEO 的にも見出しタグ（ H1 や H2 など）は重要視されます。コンテンツがいくつかのまとまりに分かれていて、かつそれぞれに見出しがある方が、文章構造として分かりやすいという判断だと思います。
何にせよ、適切な見出しの付いたコンテンツは、人にとってもクローラーにとっても親切設計です。
見出しタグ使用上の注意
ただし注意したいこともあります。
見出しタグは H1 〜 H6 と、階層構造的になるように用意されています。WordPress のビジュアルエディタでも「段落」をプルダウンすれば、見出しタグを選べるようになっています。でも見出しタグの使い方にはいくつかルールもあるのです。
見出し１（H1タグ）は１記事につき１つが原則
見出し１は投稿タイトルや固定ページのタイトルに該当します。設定した記事タイトルは、そのまま H1 扱いになるはず（そのようにテーマの方でマークアップされているはず）です。
1 つのコンテンツにタイトルが 2 つも 3 つもあるなんてことがないように（本のタイトルは 1 つですよね）、「見出し１」も 1 記事に 1 つでなければなりません。そのため、H1 タグで本文をマークアップすることはありません。使うのは H2 以降のタグです。
見出しは１〜２、３と階層構造にする
簡単に言えば順番を守りましょうということです。見出し１はタイトルに適用されており、さらに１記事に１つが原則なので、本文で使う見出しタグは「見出し２」以降になります。つまり、順番通りにいくと、本文で最初に使う見出しは見出し２になります。
見出し２は何度使用しても構いません。ですので、その次に付ける見出しは「見出し２（H2）」か「見出し３（H3）」になります。「見出し２」の後に「見出し４」を持ってきてはダメというわけです。
- 見出し１（記事タイトル）
ーーーー 以下本文 ーーーー- 見出し２（H2）
- 見出し３（H3）
- 見出し３（H3）
- 見出し２（H2）
- 見出し３（H3）
- 見出し４（H4）
- 見出し３（H3）
- 見出し４（H4）
- 見出し３（H3）
- 見出し２（H2）
- 見出し２（H2）
5. 重要な箇所は <strong> タグで囲む・適切なマークアップを行う
ネット上のコンテンツは、人とクローラー（ロボット／スパイダー）の 2 者を対象につくらなければなりません。そして、クローラーに分かりやすいコンテンツにするために重要な作業が HTML タグでのマークアップです。
前述した『見出しタグを付ける』というのも、このマークアップ作業の一環です。
目的はクローラーに分かりやすいコンテンツにすることです。人向けであれば、大きさや色などを変えるだけで見出しと判断してくれますが、クローラーはそれが分かりませんからね。
正直、HTML の原則に則って完璧にマークアップしようとすれば、結構な労力がかかります。それこそコーダーさんなどのプロの仕事です。さすがに完璧に仕上げることは無理ですし、目的はそこではありません。
あくまでも集客・セールスのために必要な最低限のマークアップということで、ここでは見出しタグ以外に大切な部分をご紹介したいと思います。
重要な箇所には <strong> タグを付けよう
WordPress で <strong> タグを用いると、その部分を太文字にしてくれます。<b> タグも同じですが、WordPress のエディタには <strong> タグが備わっています。
WordPress のビジュアルエディタでは
、テキストエディタでは
と表示されています。
HTMLクイックリファレンスによると、<strong> タグの役割は以下の様に説明されています。
<strong>タグは、強い重要性を表す際に使用します。
<strong>でテキストの一部の重要性を変更しても、文自体の意味は変更されません。
■HTML4.01からHTML5へのバージョンアップによる変更点
strong要素はHTML4.01の定義とほぼ同じですが、HTML5では<strong> ～ </strong> の中の一部を、 さらに <strong> ～ </strong> で囲むことで、重要性の強さの程度を指定し分けることができるようになっています。
他にも、似たようなマークアップ方法として、<em> や <mark> といったタグがあります。WordPress のエディタにデフォルトで備わっているタグではないので、マークアップするときはテキストエディタで直接入力する必要があります（もしくは AddQuicktag を使う）。
画像には必ず alt 属性を記載しよう
こちらのマークアップも、SEO 的に重要です。alt 属性は画像を表示させる <img> タグの中に記載して、画像が利用できない環境下で代替となるテキストを指定します。
また、人間なら目視で内容を理解できる画像ファイルですが、クローラーには分かりません。そこで、alt 属性によって “その画像が何なのか？” を示しておくことが望まれるわけです。
WordPress のエディタから画像を追加する場合は、編集画面に「代替テキスト」という項目があり、ここに入力したテキストが alt 属性となってマークアップされます。
転載・引用部分には <blockquote> タグを付けよう
記事を書いていると、他のサイトのコンテンツを転載したり、書籍から文章を引用したりすることもあるでしょう。そんな時は <blockquote> タグを使いましょう。WordPress のビジュアルエディタでは
、テキストエディタでは
と表示されています。
引用・転載元がウェブページだった場合、ソースとなる URL を cite 属性を使って指定するようになっています。
<blockquote cite=”ここに引用・転載元のURL”>引用・転載内容</blockquote>
6. カテゴリーとタグを付ける
WordPress にはカテゴリーとタグというものがあります。これらの機能によってコンテンツの内容を分類することができます。また分類した各カテゴリーやタグには、それ専用のページが用意されています。例えば、WordPress というカテゴリーを作ると、そのカテゴリーに該当する「投稿」を一覧表示したページが生成されます。
- WordPress というカテゴリー（スラッグ：wodpress）に該当する記事をまとめたページのURLの例
http://example.com/category/wordpress/ - Twenty Eleven というタグ（スラッグ：twenty-eleven）に該当する記事をまとめたページのURLの例
http://example.com/tag/twenty-eleven
カテゴリーとタグの使い分け
カテゴリーは階層構造をつくることができます。【 親カテゴリー – 子カテゴリー 】のような感じです。タグはそれができません。カテゴリーとタグの大きな違いはそこでしょう。また使い分けに関しても、これが正しいというものはないみたいですが、ぼくの場合は次の３つのパターンを使い分けています。
１．カテゴリーは大きなまとまり、タグは細かいまとまり
カテゴリーには意味の大きなキーワードを指定して、より細かいキーワードはタグで指定する使い分けです。カテゴリーの階層構造も２階層までにします。そのためカテゴリーが極端に増えることはなく、タグがどんどん増えていきます。このサイトは主にこの分け方を採用しています。
２．カテゴリーには役割を、タグにはキーワードを指定する
SEO に関わりそうなキーワードをタグで分類し、カテゴリーではそのコンテンツの役割を示す使い分けです。この場合、カテゴリーの使い方としては、「お知らせ」・「初心者向」・「上級者向」・「日記」などの分類が考えられます。
つまりそのコンテンツがどのような目的のものなのかを示しているわけです。タグにはキーワードを割り振るため、結果、以下のような分類になります。
３．カテゴリーにはキーワードを、タグには役割を指定する
２．のパターンの逆バージョンです。どちらがいいのかは分かりません。。。検索エンジンがカテゴリーやタグをどのように判断するのかが不明なもので。しかし、SEO がうまく言っているサイトを見ると、タグよりカテゴリーの方を重要視して設定しているように思います。
カテゴリー・タグ指定の注意点
「投稿」の編集画面から新たにカテゴリーやタグを追加した場合、自動的にスラッグというものが生成されます。スラッグはパーマリンク（URL）として使われます。
カテゴリーやタグをアルファベットで追加した場合は、大文字は小文字になり、スペースはハイフン（-）になり、パーマリンク（URL）としてそのまま使えそうなものがスラッグになります。しかし、日本語で追加した場合は日本語そのままのスラッグになってしまいます。
日本語 URL で構わない、という場合はそのままでいいんですが、パーマリンク（URL）が長くなってしまうのが気になります。アルファベット表記のパーマリンク（URL）にしたい場合は、「カテゴリー」や「タグ」の管理画面からスラッグ名を変更しておきましょう。
また、URL の重複を避けるため、カテゴリーとタグに同じ名前を指定することはできません。
7. All in One SEO Packをインストールして記事ごとにSEO対策を施す
WordPress の内部 SEO 対策はこれひとつで十分！ というくらい、高機能で有名なプラグイン、「All in One SEO Pack」。こちらをインストールして、各記事ごとに title、meta-description、meta-keywords を設定しましょう。
All in One SEO Packのダウンロードはこちらから
SEOタイトル
記事を書き終わったら、公開する前に SEO 設定を行いましょう。まずはタイトルです。記事のタイトルと同じでもいいんですが、ここは SEO 向けに改めて考え直すことをオススメします（その結果同じになるのは OK）。
ここで設定したタイトルは、検索結果に表示されたり Facebook や Twitter でのシェアで引用されます（OGP の設定が必要）。
実は OGP 向けにも別途タイトルを設定することができるようですが、今のところ All in One SEO Pack にその機能はありません。
SEO タイトルの文字数
また、文字数も半角60文字以内にした方がいいと注釈があります。しかし、デフォルトの設定では、投稿タイトルや固定ページのタイトルの後にサイトタイトルが表示されます。
ですので、このサイトタイトルの文字数も含めて60字以内に収めるようにしましょう。もしくは、All in One SEO Pack の設定画面でサイトタイトルが含まれない形に変更しましょう。また、検索結果に表示される文字数には限度があるので、重要なキーワードは最初に持って来るようにした方がいいです。
SEO タイトルは重複を避けてユニークに
Google さんはオリジナル性を非常に重要視しているようです。他のサイトのパクりコンテンツでないのはもちろんのこと、自分のサイト内でも重複するようなコンテンツは良い評価をされないようです。
Google のウェブマスターツールに登録していれば分かると思いますが、重複していないかどうかチェックしてくれます。サイトタイトルの重複も改善が必要だと指摘されます。ですので、出来るだけユニークなタイトルを付けるように心がけてください。
メタディスクリプション
meta-description は、検索結果のタイトル下に概要説明として表示されたりしなかったりします。また、ソーシャルメディアなどでシェアされた場合に、メタディスクリプションが引用されたりもします。
SEO 的に重要ではないとか言われているみたいですが、そんなことありませんのでちゃんと記載しましょう。
よくやってしまいがちなのが、本文の内容の一部をそのままコピペするパターンです。しかし、Google が重視しているのはオリジナル性です。それがたとえ自分のサイト内であったとしても、です。
ですので、メタディスクリプションも、それ単体でオリジナルな、ユニークなものである必要があります。
ポイントは、
- 本文をコピペしない
- 本文を簡単にまとめる
- 適度にキーワードを含める
- 短過ぎず、長過ぎず
- 「続きはこちら」で締め、先を読みたい文章にする
です。
メタキーワード
コンテンツに関連する検索キーワードを記載します。複数ある時はコンマ「, 」で区切ります。こちらも、あまり多すぎるとよろしくないようで、キーワードの数というよりは、全体の文字数（正確にはバイト数）が関係しているようです。
タイトル、メタディスクリプション、メタキーワードなどの文字数をチェックする場合は、GoogleChrome 用の拡張機能である、こちらの Sorezki SEO Plus がオススメです All in ONE SEO Pack の各設定蘭に表示されている文字数カウントを参考にしてください。
また、複数のキーワードを指定する時は、関連性が高く重視したいキーワードを先に持って来るようにしましょう。
WordPress の初期設定の基本的な項目 3 つ、一般設定・投稿設定・パーマリンク設定について。
１．一般
ここでのポイントは 2 点。サイトタイトルとキャッチフレーズです。特に注意したいのが、ここで設定するタイトルやキャッチは視覚的に現れるものだということです。
どういうことでしょうか？
ウェブサイトというのは見せる対象が 2 通りあります。ひとつはぼくたち人です。そしてもうひとつは検索エンジンです。検索エンジン向けのタイトルは All in One SEO Pack というプラグインで設定しますので、ここでの設定は人向けに行ってください。
つまり、実際にウェブサイトを見た人の目に入ってくるサイトのタイトルということです。キャッチフレーズも同様です。「訪問者にどんなメッセージが伝われば、このサイトをより見てもらう事ができるのか？」ということを考えて付けるのもいいでしょう。非表示設定もできますので、あまり深く考えずに付けても OK です。
ポイント
一般設定でのサイトタイトル・キャッチフレーズは人に向けて SEO タイトルは All in One SEO Pack で検索エンジンに向けて設定
２．投稿設定
ここでの設定はとりあえず 1 点だけで OK です。その他は追々で構いません。ではその 1 点とはどこか？ それは更新情報サービスです。ここには、いわゆる Ping の送信先を書き込みます。ブログを更新した際にその更新情報を送ってくれます。
Ping の送信先
以下に代表的な Ping の送信先をピックアップしました。そのままコピペするもよし、他の送信先を追加するもよし、逆に削除するもよし。ご自由に設定してください。ただし、あまり送信先が多くなりすぎないように！
http://blog-search.net/up.php
http://blog.goo.ne.jp/XMLRPC
http://blog.with2.net/ping.php/1143367/1295154496
http://blogsearch.google.com/ping/RPC2
http://bulkfeeds.net/rpc
http://ping.bloggers.jp/rpc/
http://ping.fc2.com
http://ping.gpost.info/xmlrpc
http://ping.myblog.jp
http://ping.rss.drecom.jp/
http://rpc.pingomatic.com/
ちなみに、Ping はちょっとブログの記事を修正するなどの更新をした場合にも送信されてしまうようです。そうなると、頻繁に送信されて “うざい” ので、プラグインなどで送信を制限できます。オススメのプラグインはこちらです。
また、複数の WordPress サイト管理している場合など、Ping の管理を一括で行えるサービスもあります。この PINGZONE というサービスも使い勝手がよさそうでした。
整形
あと、これは好みですが、ぼくは一番上の【整形】のところのチェックも外しています。海外で使われる顔文字（ :-) とか、:-P など）が、絵文字に置き換えられる設定になっています。
このサイトでは CSS や PHP のコードを記述することが多いのですが、この設定が原因でコードの一部がスマイルマークに変わっていたことがあって、その時このチェックを外しました。それまで気にもしていませんでしたが、思わぬ落とし穴でした。
３．パーマリンク設定
パーマリンク設定は重要です。SEO 的にも重要です。パーマリンク設定はいくつか選択肢が用意されていますし、自分で好きなようにカスタマイズすることもできます。このサイトのパーマリンクは、ドメインの後に投稿名が来る形にしています。設定画面にある 5 つ目の設定です。
そして、この設定をオススメします。
主な理由は以下の 3 つです。
パーマリンクを投稿名にすべき３つの理由
理由１）永続性がある
パーマリンクの目的はひとつに永続性です。そのリンクが半永久的に有効なようにするのが役割です。そのため、できるだけWordPressの各種設定変更の影響を受けない形が理想です。例えばカテゴリーやタグの名前をパーマリンクに差し込んだ場合は、カテゴリー名やタグ名を変更した際にパーマリンクが変わってしまい、永続性が失われてしまいます。
理由２）意味のある文字列にできる
リンクにも意味がある方がよい、というわけです。ユーザーが URL を覚えやすくするには、URL に意味を持たせる方が効果的ですからね。そういうわけで、デフォルト設定のポスト ID だけなんていう意味のない文字列のパーマリンクは絶対にやめましょう。
URL に含まれるキーワードは検索対象にもなります。例えば Google で「WordPress」と検索すると、タイトル以外にも URL が検索キーワードとしてヒットしているのが分かると思います。話はそれますが、そういう意味ではキーワードを意識した日本語URLも効果的です。（ただし、日本語にすると URL が長くなりすぎるので注意）
理由３）長くなりすぎない
パーマリンクが長すぎると、SEO 的に良くないという情報もあります。Sorezki SEO Plus という SEO チェックの GoogleChrome プラグインからは、あまりに長い URL は警告を受けてしまいます。順位が下がる程影響を与えることはないようですが、URL が長くなるとページのサイズが大きくなるためユーザビリティ的にもよろしくありません。
パーマリンクにカテゴリー名などを含めると、これが長くなる原因になってしまいます。カテゴリーを階層構造にしているとなおひどいです。【 親カテゴリー/子カテゴリー/投稿名.html 】みたいになります。なので、余計な情報は挟まず、適度にキーワードを盛り込んだ投稿名ベースのパーマリンクがオススメというわけです。
パーマリンクは投稿名ベースで！
というわけで、パーマリンクは投稿名ベースの 5 つめにすることをオススメします。もしくは、投稿名の前に固定の架空ディレクトリを挟んでもいいと思います。
WordPress のバージョン 3.3 より前は、投稿名のみは非推奨となっていて、一文字でもいいから投稿名の前に何か挟むように言われていました。（例えば、http://ドメイン/a/投稿名/ みたいな感じです。）バージョン 3.3 以降は選択肢にもしっかり用意されたので問題ないようです。
ちなみに、パーマリンクに特定にキーワードを挟む場合は、カスタム構造で設定します。例えば、
というパーマリンクを設定する場合は、カスタム構造をチェックし以下のように入力します。
また、末尾に.htmlなどの拡張子を入れるのはパーマリンクの永続性を保つ観点からよくないようです。しかし、WordPressサイトの表示速度の観点からすると、キャッシュを利用した表示速度アップのために.htmlがあった方がいいようです。どちらを選ぶか正解はありませんが、迷うようなら無しでいいと思います。
参考記事
パーマリンクに関してはこちらを参考にしてください。
— URL最適化5つのSEOポイント | Web担当者Forum
— WordPressでSEOに有利かつ短い究極のパーマリンク設定（2012年用最新版！）
— WordPressのパーマリンク設定を最適なものにカスタマイズする
使い分けとしては、、、
- トップページやアーカイブページなどでは抜粋表示
- 記事全文を読みたい場合の個別投稿ページでは全文表示
というのがベターだと思います。
しかし、WordPress のデフォルトテンプレートである Twenty Eleven や Twenty Twelve など、初期設定のままだとトップページやアーカイブページでも全文表示なっているます。いちいち タグを挿し込むのも面倒くさい・・・。他のテンプレートでも同じようになっているかもしれません。
この記事では、条件分岐タグを使って全文表示と抜粋表示を使い分ける方法をご紹介します。
条件分岐タグの役割を理解しよう
まず、簡単にWordPressの条件分岐タグについて説明しておきたいと思います。理屈はそんなに難しくないはずです。PHPを使っていますが、特に専門的な知識がなくても使えてしまう便利さがあります。（少なくともぼくはPHP、よく分っていません）
条件分岐タグの基本構造は・・・
というものです。簡単ですよね？これを実際のPHPのタグに合わせて見てみましょう。
<?php if ( 【条件１】 ) : ?> 【表示１】 <?php else : ?> 【表示２】 <?php endif; ?>
| もし | <?php if ( 【条件１】 ) : ?> |
| 【表示１】 | 任意のタグ |
| それ以外は | <?php else : ?> |
| 【表示２】 | 任意のタグ |
| 条件指定終わり | <?php endif; ?> |
といった感じです。あとは、これらを踏まえて指定したい条件と表示させたい内容のタグを埋め込んでいけばいいというわけです。
条件を複数指定したい場合
条件を複数指定したい場合は、【 || 】この縦２本のラインを挟めばOKです。例えば、「もし、【条件１】【条件２】【条件３】の場合は・・・」というような指定をしたい場合は以下のように指定します。
<?php if ( 【条件１】 || 【条件２】 || 【条件３】 ) : ?>
多分、抜粋表示をさせたいのはカテゴリーページやタグページなど、複数に渡るはずなので、この複数の条件指定を覚えておきましょう。
ちなみに、この線（ → | ）なんて呼ぶのか分りませんが、キーボードの右上にあるはずです。。。
条件分岐タグを使って全文表示と抜粋表示を切り替える
さて、いよいよ実践です。今回は以下のように指定したいと思います。
| 抜粋表示 | トップページ（投稿一覧） アーカイブページ（archive.php） 検索結果一覧ページ（search.php） |
|---|---|
| 全文表示 | 個別投稿ページ（single.php） 固定ページ（page.php）など |
つまり、文章にしてみると、『もし、トップページ・アーカイブページ・検索結果エページの場合は抜粋表示にして、それ以外の場合は全文表示にしてね』となります。
ちなみに、アーカイブページとは、「カテゴリーページ」・「タグページ」・「作成別ページ」・「日付別ページ」の結果を全て含んでいます。なので、条件としてはアーカイブページを指定しておけばOKです。
全文と抜粋を着替える条件分岐タグの指定例
全文表示と抜粋表示の切り替えを指定するためには以下のように記述します。
<?php if ( is_home() || is_archive() || is_search() ) : ?> <?php the_excerpt(); ?> <?php else : ?> <?php the_content(); ?> <?php endif; ?>
ちなみに、トップページを指定する WordPress の条件分岐タグは
is_home()
カテゴリーページを指定する条件分岐タグは
is_archive()
検索結果一覧ページを指定する条件分岐タグは
is_search()
です。
また、抜粋表示を示す WordPress のタグは
<?php the_excerpt(); ?>
全文表示を示すタグは
<?php the_content(); ?>
です。実際はスタイルシートの指定やその他の PHP が記述されていると思いますが、単純化するとこのようになっています。
タグはどこに書き込めばいいのか？
ここからは Twenty Eleven、もしくは Twenty Twelve を元に解説していきます。条件指定の仕方は WordPress 共通していますので、お使いのテンプレートに合わせてカスタマイズしてみてください。
それでは、まずは content.php を開きましょう。Twenty Eleven は 35 行目、Twenty Twelve は 33 行目辺りから、コンテンツの表示方法についての記述があります（子テーマに複製してから作業してくださいね）。
<?php if ( is_search() ) : // Only display Excerpts for Search ?> <div class="entry-summary"> <?php the_excerpt(); ?> </div><!-- .entry-summary --> <?php else : ?> <div class="entry-content"> <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?> </div><!-- .entry-content --> <?php endif; ?>
元々の記述内容は、『もし、検索結果一覧ページなら抜粋表示にして、それ以外は全文表示にしてね〜』となっています。なので、単純に最初の
<?php if ( is_search() ) : // Only display Excerpts for Search ?>
の部分を
<?php if ( is_search() || is_home() || is_archive() ) : // Only display Excerpts for Search ?>
に変更すれば OK です。
簡単ですね。ぜひ試してみてください。
ちなみに、この記事を理解するには、まず WordPress の子テーマについて理解して置く必要があります。子テーマについてはこちらの記事にまとめていますので、「子テーマって何！？」という場合は、まずこちらからチェックしてください。
子テーマにfunctions.phpを加えたい場合
さて、この子テーマ、カスタマイズしたい部分だけ、カスタマイズしたいファイルだけを上書きすることができる便利な機能なんですが、functions.php に関しては扱いに注意が必要です。
その注意点を一言でまとめるなら・・・
『追加はできるが、上書きはできない』
という感じでしょうか。もうちょっと詳しく説明していきましょう。
テンプレートファイル（header.phpやcontent.phpなど）やスタイルシートを子テーマで作成した場合
通常、子テーマにテンプレートファイルやスタイルシートを作成した場合、該当する部分を上書きすることになります。
例えば、元々のスタイルシートにはブログのタイトルの文字色が黒で指定されていたとします。しかし子テーマのフォルダの中に追加したスタイルシートで、新たにブログタイトルの文字色を赤に指定すると、こちらの設定が反映されます。
つまり、親テーマで指定している要素を改めて指定し直す事ができるので、上書きしていると言えると思います。
functions.php を子テーマで作成した場合
一方で functions.php を子テーマのフォルダの中に作った場合は同じようになりません。親テーマに記述されていることを上書きしてくれないのです。
もし、親テーマに記述してあることを改めて記述してしまうと、エラーが発生して WordPress が表示できなくなってしまいます（恐ろしい・・・）。そのため、functions.php の内容を変更したい場合は、親テーマの方を直接いじる方が無難です。
当然、親テーマのアップデートがあったりなんかすると、変更した内容が失われてしまいますので、注意が必要です。
しかし、親テーマに記載されていない内容を追加したい場合は、子テーマ内に functions.php を作ってカスタマイズすることができます。子テーマフォルダ内に作成した functions.php をカスタマイズする場合は、追加したい内容を以下のように記述していく感じです。
<?php /* ここに新しく追記 */ ?>
functions.php をカスタマイズしたい場合は注意してください。
]]>元々
だったのを、
にしました。
パーマリンクを途中で変更することは、リンク切れが発生することになってしまうので、被リンクが多いサイトだと弊害が多いと思いますが、幸い（？）まだほとんど被リンクは無いので、思い切って変更することにしました。
それでも「いいね！」とかツイート、はてなブックマークされているURLは全部無効になってしまいますがね・・・。
もちろん、その対処法もちゃんとあるのでご紹介します。
なぜ、パーマリンクを変更したのか？ -１
パーマリンクを変更した理由は 1 つあります。
２．カテゴリーの変更などすると面倒なことになる
今までのパーマリンクは、ドメインの後にカテゴリーを挟んで記事タイトル名（英語表記に自分で変更）、最後に.html を付け加えていました。
で、問題はこのカテゴリーの部分です。カテゴリーの多くを 2 階層構造にしていたので、パーマリンク内のカテゴリーを示す部分が、親カテゴリー / 子カテゴリー という二段構えになっていました。
そのためURLが非常に長くなってしまったわけです。
長いURLは好まれない
URL はあまり長すぎると SEO 的によくないようです。
そのせいで順位が大きく変動したり、ペナルティをくらったりといったようなことは無いようですが、URL が長いと HTML のバイト数が肥大したり、リンクを貼ってもらいにくくなったり、クローラーに最後まで読んでもらえなかったりと、あまり好ましくないことが起こるようです。
そして何より、ぼくにとって衝撃だったのが、GoogleChromeのSorezki SEO Plus というアプリです。この Sorezki SEO Plus というアプリを SEO をチェックしたいページで使用すると、各種サーチエンジンやソーシャルメディアからのアクセス状況や、HTMLやCSSなどの記述に関する注意点などを教えてくれます。
その中に【URL Length】という項目があります。
そしてここをチェックすると、URL が長過ぎる！と思いっきし赤で × マークが表示されるのです。
いくら検索結果の順位に大きく影響しないと言われても、ここまではっきりと警告を突きつけられると、なんだか恐ろしくなって「なんとかせねば！」という衝動にかられるものです。
人は快楽より恐怖で行動する生き物
まったく話は変わりますが、人間の行動理由は大きく 2 つのタイプに分けられます。１つは得たい欲求から行動するタイプ。もうひとつは失う恐怖から行動するタイプです。
そしてこの２つを比べると、得たい欲求よりも失う恐怖の方が強烈に行動を喚起します。色々な商品やサービスが数量を限定したり、期間を限定したりして販促をしていうのは、この失う恐怖に訴求しているわけですね。
で、この SEO のメッセージも、思いっきり真っ赤に「×」と表示して、「やばいよ、キミ」みたいな感じで恐怖に訴えてくるものだから、思わず行動してしまったというわけです。
WordPress のパーマリンクに関しては、カテゴリーを挟んだ方がいいという人もいますし、日本語でも OK という人もいます。なので、まぁどれが正解というものでもないのかもしれませんが、とりあえずは検索エンジンロボットが読みやすい URL にしようと思ったわけです。
なぜ、パーマリンクを変更したのか？ -２
パーマリンクを変更した理由は２つあって、ひとつは長い URL に警告が出ていたことに気付いてしまったから。そしてもうひとつは、カテゴリーを途中で変更すると面倒なことになってしまう、という点です。
パーマリンクを決める上で重要視しなければならない点は、その URL に永続性があるかないか、という点です。リンク切れを起こしたりしないかどうか、ということですね。
そして、カテゴリーを URL の中に含んでいると、途中でカテゴリーの名前を変更したときに URL が変わってしまうことになります。そうすると、過去の URL がリンク切れとなってしまうわけですね。
もちろん、リダイレクトの設定をしておけば、旧 URL にアクセスしても新URLに転送されるので、問題が発生しないように設定することはできます。でも、いちいち面倒ですし、万が一リンク切れを起こしてしまえば、ユーザビリティ的にも SEO 的にもよくありません。
なので、途中でカテゴリーを変更しても影響がでないように、パーマリンクにカテゴリーを含めることはやめることにしたのです。
後々影響が出そうな設定は避ける
カテゴリーに限らずタグなんかも、パーマリンクの中に含んでいると後々影響が出てしまう可能性があります。例えば、途中でタグを変更したり削除したりすると URL が変わってしまい、古い URL からはアクセスできなくなってしまいます。
パーマリンクを設定する際は永続性のある URL にするなどいくつか注意するべき点があるようですが、その他の観点も含めて「もうポストタイトルだけでいいや！」という結論に至りました。
でもドメインのすぐ後にポストタイトル（記事タイトル）を持ってくる設定は、WordPress 的には非推奨・・・のようですね。
現在は初期状態の設定に投稿名をパーマリンクに使用できるチェックボックスがあります。WordPress 的に非推奨というのは過去の話になったようですね。
途中でパーマリンクを変更する際のリダイレクト設定が簡単にできるプラグイン
パーマリンクを途中で変更すると、前の URL にアクセスした場合に、404 の Not Found が表示されてしまいます。
そのため、もし途中でパーマリンクを変更する場合は、古いパーマリンクにアクセスした場合に新しいパーマリンクへ自動的に転送してくれるように設定しておく必要があります。
そこでプラグインの出番です。
プラグインを使わない方法もあるようですが、素人は素直にプラグインを使って楽させてもらいましょう。
簡単にリダイレクトの設定ができるプラグイン Permalink Redirect
このプラグインは、必ず以下のURLのページへ行って、直接ダウンロードするようにしてください。
＞ Permalink Redirectのダウンロードはこちら
ダウンロードしたファイルは、FTPなどを使ってプラグインのフォルダの中へアップロードする必要があります。
要するに、WordPressの管理画面のプラグインページからプラグイン検索をしてインストールしてはいけない、ということです。同じ名前の違うプラグインがあるようなので、関係ないプラグインをインストールしてしまう可能性があります。
Permalink Redirectをアップロードする前に…
上記のサイトへ行くと、PHP 版と ZIP 版がありますが、どちらにしてもサーバー上にアップロードするのは、【 ylsy_permalink_redirect.php 】という PHP ファイルのみなので、注意してください（フォルダではなく、ファイルをアップロード）。
ディレクトリ名で言うと、
- wp-content
- ∟ plugins
- ∟ ylsy_permalink_redirect.php
- ∟ plugins
ということになります。
が、アップロードする前に、ちょっとだけファイルの中身を変更しておきましょう。具体的には以下のようにします。
if (!function_exists('wp_redirect')) {
function wp_redirect($location, $status=301) {
global $is_IIS;
405 行目に書かれている数字が 302 となっていますので、ここを 301 に変更します。302 は一時的なリダイレクト。301 は恒久的なリダイレクトです。パーマリンクの変更は一時的ではなく、ずっと変更したまま使い続けるはずなので、301 にしましょう。
Permalink Redirectを有効化する
プラグインを FTP などで直接サーバーにアップロードしたら、WordPress の管理画面からプラグインを確認することができます。プラグインを有効化しましょう。
旧パーマリンクから新パーマリンクへのリダイレクト設定
まずは、普通にパーマリンクの変更をしましょう。WordPressの【設定】から、【パーマリンク設定】へ行けば好きなように変更することができます。
次にプラグインの編集画面へ行きます。【設定】の一覧に【permalink Redirect】が表示されているはずです。
プラグインの編集画面では、以下のように新しいパーマリンクが表示されているはずです。間違いが無ければ、変更前のパーマリンク設定を【Old Permalink Structures】の部分に記載します。
後は【Update Options】を押して終わりです。簡単ですね。
もし、パーマリンクを変更しなければならなくなった場合は、活用してみてください。
参考にさせて頂いたサイト
]]>というわけで、以前「複数ユーザーでワードプレスを更新するなら知っておくべき権限や個別プロフィール表示など」という記事でブログ記事ごとにプロフィールを表示させる方法をご紹介しました（テンプレートが Twenty Eleven の場合）。
しかし、実際表示されたプロフィールはなんだか味気ないものだったので、もっとちゃんと色々情報を表示して欲しい！ということで、ちょっとカスタマイズしましょう。
そしてついでに著者・ライターごとのソーシャルメディアなんかと関連づけを行ってみましょう。
不要なプロフィールを削除する
まずは、プロフィールの項目の中で不要な項目を削除しまう。
テンプレートフォルダを開いて、【 functions.php 】に下記を追記すればOKです。これで、上記の３項目、AIM・Yahoo!IM・Jabber/Google Talk というなんだか馴染みのないサービスの項目が消えます。
/* 不要なプロフィール削除 */
function hide_profile_fields( $contactmethods ) {
unset($contactmethods['aim']);
unset($contactmethods['jabber']);
unset($contactmethods['yim']);
return $contactmethods;
}
add_filter('user_contactmethods','hide_profile_fields');
プロフィールにソーシャルメディアを表示させる
そしたら逆に馴染みのある項目をプロフィールに表示させたいと思いませんか？ 例えば Facebook や Twitter、Google+ など。そんなソーシャルメディアの情報をプロフィールに表示させるために項目を追加します。
同じく【 functions.php 】を開いて下記のタグを追記。
/* ソーシャルメディアをプロフに追加 */
function my_new_contactmethods( $contactmethods ) {
$contactmethods['twitter'] = 'Twitter'; /* ツイッター */
$contactmethods['facebook'] = 'Facebook'; /* facebook */
$contactmethods['google_plus'] = 'Google+'; /* Google+ */
return $contactmethods;
}
add_filter('user_contactmethods','my_new_contactmethods',10,1);
これで、Twitter と Facebook と Google+ が追加されました。そして Twitter には Twitter の ID、Facebook には Facebook のユニークユーザーID、Google+ には Google+ の長ったらしい数字の ID を入力しておきます。
他にも追加したい項目があれば、【 function 】と【 return 】の間に以下のコードを追加すれば OK です。
$contactmethods['（任意のパラメータ（英数字））'] = '任意の表示名';
例えば電話番号を追加したい場合は、【 任意のパラメータ 】の部分に英数字で「number」などの名前をつけて、【 任意の表示名 】のところには、プロフィール編集画面上に表示させたい項目名を「電話番号」などのように入力します。
$contactmethods['number'] = '電話番号';
パラメータの部分に英数字で付けた名前は、プロフィールの情報をブログ上に呼び出すのに必要になります。これで連絡先情報にいくらでも好きな項目を追加させることができますね。
投稿記事にプロフィールの詳細情報を表示させる
これで準備は OK です。あとは、入力したプロフィールの項目が、ちゃんと投稿者別に表示されればいいんですが、どうも Twenty Eleven の場合デフォルトじゃ表示してくれないみたいです。なので色々カスタマイズする必要があります。
プロフィールの連絡先情報など表示させるタグ
基本的に、著者の情報を表示させるテンプレートタグはこちらです。
<?php the_author_meta( 'パラメータ', 'ユーザーID' ); ?>
ユーザーID は、ループの中で使う場合は指定する必要がないとなっています。つまりループ内でこのタグを使用した場合は、投稿者の ID が自動的に適用されるということになります。
ここでは投稿した人のユーザーID をそのまま反映してくれればいいので、指定する必要はないということになります。
例えば Twitter の ID を表示させる場合は、
<?php the_author_meta( 'twitter' ); ?>
Facebook の ID を表示させる場合は、
<?php the_author_meta( 'facebook' ); ?>
ということになります。パラメータの部分は、先ほどfunctions.phpの中で指定したパラメータを入力します。Twitter の ID は【 twitter 】、Facebook は【 facebook 】、Google+ は【 google_plus 】、電話番号は【 number 】にしてましたね。
これらは先ほど任意で指定したものなので、好きなように指定できますが、デフォルトで決まっているパラメータもいくつかあります。
例えば、、、
- メールアドレス ⇒ user_email
- ウェブサイトURL ⇒ user_url
などがそれぞれのパラメータになります。
連絡先情報タグの使い方
では実際どうやって表示させるのか？
表示させる方法はいたって簡単で、上記のタグを差し込めば、その場所にプロフィールの連絡先情報に入力した内容が表示されるというわけです。
ただ、ソーシャルメディア系の連絡先情報はあくまでも ID なので、それを表示させてもいまいち機能してくれません。ですので、それぞれの ID は各ソーシャルメディアのソーシャルプラグインと組み合わせて使う必要があります。
例えばTwitterのフォローボタンを表示させたい場合、フォローボタンのタグのIDの部分に先ほどの連絡先情報のテンプレートタグを埋め込みます。
<a class="twitter-follow-button" href="https://twitter.com/（ココがTwitterのIDなので、テンプレートタグに置き換える）" data-show-count="false" data-lang="ja" data-show-screen-name="false">@フォローする</a>
<script type="text/javascript">// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// ]]></script>
上記は Twitter のフォローボタンのタグですが、このタグの中にあるID部分をTwitterのIDを吐き出してくれるテンプレートタグ
<?php the_author_meta( 'twitter' ); ?>
に置き換えると、記事の投稿者に合わせて Twitter の ID が適用されて、投稿者用のフォローボタンとして表示されるようになります。
Facebook や Google+ なんかも同じで、ソーシャルボタンを取得すると必ずIDに該当する部分がありますので、そこを該当するテンプレートタグに置き換えればユーザーが自分のプロフィール連絡先情報に入力したIDが適用され、投稿者ごとにソーシャルボタンのリンク先も変えることができるというわけです。
執筆者のプロフィールを表示させるテーマファイルは？
あとは、プロフィールに表示させたいこれらのタグをどこに書き込めばいいのか、ということですが、これはカスタマイズのしようによってはいくつか方法がありそうですが、今回は最も簡単そうなパターンをご紹介しておきます。
(1) content-single.php内の著者情報に関する記述
テーマファイルの【 content-single.php 】を開きます。すると、55 行目辺りから【 author-info 】というidが指定されているのが分かると思います。ここら辺が著者情報に関する記述のようですね。そこだけ抜き出してみると以下のようになっています。
<div id="author-info"> <div id="author-avatar"> /* ▼ この下のPHPタグでアバター画像を表示させています。 */ <?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'twentyeleven_author_bio_avatar_size', 68 ) ); ?> </div><!-- #author-avatar --> <div id="author-description"> <h2><?php printf( __( 'About %s', 'twentyeleven' ), get_the_author() ); ?></h2> /*「（ユーザー名）の紹介」と表示されます。*/ <?php the_author_meta( 'description' ); ?> /* プロフィール情報の内容が表示されます。*/ <div id="author-link"> <a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author"> <?php printf( __( 'View all posts by %s <span class="meta-nav">→</span>', 'twentyeleven' ), get_the_author() ); ?></a> /* ここのリンクは当該ユーザーが書いた記事のアーカイブページ（author.phpにて出力）へリンクしています。:? </div><!-- #author-link --> </div><!-- #author-description --> </div><!-- #author-info -->
(2) 著者情報を編集してみる
早い話が上記の部分にテンプレートタグを書き込めば表示されます。書き込む場合は好みにもよりますが、【 <div id=”author-description”> 】の間がいいでしょう。かつ、独自に追加した部分に関してはレイアウトを考慮して、別途idを指定しておいた方がいいと思いますし、ソーシャルプラグインを表示させる場合は、リスト表示にした方がいいと思います。
例えば、、、
<div id="author-info">
<div id="author-avatar">
<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'twentyeleven_author_bio_avatar_size', 68 ) ); ?>
</div><!-- #author-avatar -->
<div id="author-description">
<h2><?php printf( __( 'About %s', 'twentyeleven' ), get_the_author() ); ?></h2>
<?php the_author_meta( 'description' ); ?>
/* ▲ ここまでは変更なし ▲ */
/* ▼ 以下を追記 ▼ */
<div id="contact-info"> /* CSSでデザインしやすいように任意でつけたid */
<ul> /* リスト形式にした方が、表示がきれいになるという実感があります。*/
<li><a href="mailto:<?php the_author_meta( 'user_email' ); ?>">メールを送る</a></li> /* ユーザー情報のメールアドレスを呼び出して、メーラーが立ち上がるようにしています。*/
<li>
<a class="twitter-follow-button" href="https://twitter.com/<?php the_author_meta( 'twitter' ); ?>" data-show-count="false" data-lang="ja" data-show-screen-name="false">@フォローする</a>
<script type="text/javascript">// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// ]]></script>
</li>
/* ▲ 上記はTwitterのフォローボタンのタグですが、TwitterのIDを指定する箇所がテンプレートタグになっていて、ユーザーのプロフィールに入力したTwitterIDの内容が適用されるようになっています。*/
<li><?php the_author_meta( 'number' ); ?></li> /* ここは先ほど追加した電話番号を呼び出しています。*/
<ul>
</div>
/* ▲ 追記はここまで▲ */
/* ▼ 以下変更なし ▼ */
<div id="author-link">
<a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
<?php printf( __( 'View all posts by %s <span class="meta-nav">→</span>', 'twentyeleven' ), get_the_author() ); ?>
</a>
</div><!-- #author-link -->
</div><!-- #author-description -->
</div><!-- #author-info -->
あとは、必要に応じてテンプレートタグを埋め込んで行けば、ユーザープロフィールに入力した情報が、執筆者に合わせて表示されるというわけです。
これで複数ユーザーで記事を投稿していっても、個々人のアピールもでき、それぞれが読者とのつながりも生み出せて、運用の幅がひろがるのではないでしょうか？
ちなみに、リスト形式で追加した項目を CSS 側で編集したい場合（文字色や大きさを変えたりなど・・・）は、
- #contact-info
- #contact-info ul
- #contact-info li
- #contact-info li a
などで指定できます。
ぜひ活用してみてください。
参考にさせて頂いたブログ記事
ー WordPress のよくあるカスタマイズコード functions.php 多め
ありがとうございました！
で、Twenty Eleven を 1.4 へとバージョンアップしようと思ったのですが、なんか怪しい・・・。そう、今まで Twenty Eleven を直接いじっていたものだから、バージョンアップすると上書きされてカスタマイズした内容が全て消えてしまうのです。
じゃあバックアップ取ってから、アップグレードした後にスタイルシートだけもう一度上書きすればいいか〜とも思えるのですが、実はもっとスマートな方法があるようです。WordPress のテーマをカスタマイズする際は本来こうしておくのが定石、基本だという方法があるのです。
それが、
子テーマを作る
という方法。
これ、基本。常識だそうですね。。。今まで Twenty Eleven を直接いじってましたよ。バージョンアップなんてそんなにないだろうと高をくくっていましたからね。
ですが、今回みたいなアップグレードがある時にいちいち上書きされていたら修正が大変なので、効率的にも『子テーマ』を作った方がいいようです。なので、 Twenty Eleven のバージョンアップの前に、今らさらですが、子テーマへの引っ越し作業をしてみました。
子テーマの基本
まずは子テーマについて簡単にまとめておきます。
子があるのだから親があるわけですが、まず親テーマとはあなたがカスタマイズしたいテーマのことです。ここでは Twenty Eleven としておきましょう。
でもカスタマイズしたいといっても、テーマの 1 から 10 まで全て書き換えたいなんて思うことは少ないはずです。基本的には style.css と、functions.php と、あとページ用のテンプレートファイルが少々、、、といったところではないでしょうか？
そこで、自分が書き換えたいファイルだけを寄せ集めたテーマフォルダを新たにつくって、そこで親テーマの変更したいファイルだけを上書きしてしまおう、というのが子テーマです。
例えば、Twenty Eleven（フォルダ名 twentyeleven ）の子テーマ、Child（フォルダ名 child ）というのを作ります。そしてその子テーマフォルダの中に style.css というスタイルシートを作成すると、子テーマのスタイルで指定した内容が親テーマに反映されるというわけです。
カスタマイズした内容は、全て子テーマである Child の中にあるので、親テーマである Twenty Eleven をアップグレードして上書きしたとしても、カスタマイズした内容はびくともしないのです。子テーマを構成するファイルもカスタマイズに必要な分だけなので、すっきりして扱いやすくなります。
これらの変更は、スタイルシートだけではなく子テーマ内にあるファイルが優先的に反映され、functions.php や、header.php など、親テーマを一切いじらずに好きなようにカスタマイズすることができます。
子テーマの設定方法（とりあえずは CSS だけ）
では実際に子テーマを作る方法ですが、これがあっけないくらいに簡単でした（といっても、ちょっとだけつまづいてしまいましたけど……）。
まずは、子テーマ用のフォルダ（ディレクトリ）を用意しましょう。フォルダ名はなんでも構いませんが、ここでは【 child 】にしておきましょう。そしてこのフォルダは【 themes 】の直下に置きます。つまり親テーマである【 twentyeleven 】というフォルダと同じ階層ということです。
子テーマ内にスタイルシートを作成する
そしてこの【 child 】の中に【 style.css 】を 1 つ作成しましょう。そして以下のようにスタイルシートに記述します。
/* Theme Name: Child Template: twentyeleven */
とりあえず必須項目は上記の 2 点のみです。Theme Name は任意で付けてください。そして Template という部分は、必ず親テーマのフォルダ名（ディレクトリ名）にするようにしてください。Twenty Eleven を親テーマとする場合は【 twentyeleven 】です。
子テーマを認識させるための必須項目は 2 点ですが、他にも Author とか Description とか、色々書いても OK です。
子テーマが表示されない場合、もしかすると・・・
これらの設定が済んだら、1 度 WordPress の管理画面（ダッシュボード）を見てみてください。外観のテーマ管理画面の中に、今作成した Child というテーマが表示されているはずです。
実は、素人すぎてここでちょっとつまづいてしまったポイントがありました。子テーマをアップしてもなかなか認識してくれなかったのですが、その原因はスペースの使い方でした。
子テーマの CSS にテーマの名前（ Theme Name ）とフォルダの指定（ Template ）をしたと思いますが、ここの Theme Name: と Child の間、Template: と twentyeleven の間が全角スペースになっていると、子テーマとして認識してくれませんでした（「親テーマが見つかりません」みたいなメッセージが……）。
全角のスペースを取っていた事が原因のようです。
他にも、Template: で指定すべきフォルダ名に大文字が混ざっていたりするのも、認識できない原因になります（正確には、大文字どうこうより、フォルダ名通りであること。つまり Twenty Eleven ではなく、twentyeleven というサーバー上のフォルダ名を指定すること！）。
子テーマを反映させる
さて、無事テーマ管理画面で子テーマとして作成したテーマが表示されていたら、子テーマを【 有効化 】してみましょう。無事子テーマが利用中になったはずです。
そしてブログを見てみると・・・
なんと、レイアウトがめちゃくちゃです。
それもそのはず、PHP などのテンプレートファイルは親テーマのものをそのまま使っていますが、スタイルシート（ style.css ）に関しては、先ほど子テーマの中にファイルを用意しましたのでこちらが適用されています。
子テーマのスタイルシートには、まだ何も書き込んでいませんので、デザイン的な部分は簡素になってしまったわけです。
親テーマの CSS をとりあえず読み込む
スタイルシートは子テーマフォルダ内のものが適用されているわけですが、最初からスタイルを指定していくのは面倒です。ある程度は親テーマと同じスタイルを適用しておきたいはずです。
いちいち全部をコピペしてもいいのですが、以下のように書いておくと、親テーマのスタイルシートをインポートしてくれます。
/*
Theme Name: Child
Template: twentyeleven
*/
@import url('../twentyeleven/style.css');
ただ、ぼくの場合はもう既に親テーマのスタイルシートを結構いじっていましたので、全部コピペしました。
基本的には、上記のような ＠ から始まる記述を 1 行入れて親テーマをインポートし、カスタマイズしたい箇所の id や class を確認して指定しなおすと、子テーマのスタイルが適用されるようになります。
例えば、Twenty Eleven の場合、タイトルの文字に関して指定している id は【 #site-title a 】になりますので、子テーマのスタイルシートで【 #site-title a 】の文字色を赤に指定すると、タイトルの文字色が赤になるというわけです。
/*
Theme Name: Child
Template: twentyeleven
*/
@import url('../twentyeleven/style.css');
#site-title a {
color: #f00;
}
これで子テーマのスタイルシートが適用されるようにしておけば、親テーマの Twenty Eleven をバージョンアップしても大丈夫です。
他にも functions.php とか、各種テンプレートファイルの header.php や footer.php などを子テーマを用いる事で上書きできます。
あと、子テーマフォルダの中にイメージフォルダ（ images など）も追加し、その中に画像をアップロードするようにしておくと、CSS で画像を指定する際にイメージフォルダ内の画像を相対パスで指定できるので、便利がいいと思います。
]]>