WordPress テーマの改良 SEO対策

　ココでは検索エンジンなどで上位表示しやすいSEO的に良いデザインにしたり、記事の投稿をしやすくなるようWordPressを改良していきます。

　まずはrss（記事の更新情報）などを出力できるようにしたり、記述の重複などをしないように最適化されるように設定します。

　あと、「パンくずリスト」というページの階層構造をわかりやすくするリンクを記事の個別ページ、カテゴリーページ、過去ログのページに追加してサイト内リンクを改善します。

それでは、はじめましょう。

まずは、functions.phpに以下の記述を追加してください。

functions.php //WordPressのバージョン情報の出力を停止 remove_action('wp_head','wp_generator'); //RSSフィードの情報を出力 add_theme_support('automatic-feed-links'); //jQueryの設定を出力 add_action('wp_head', 'myScript', 1); function myScript() { wp_enqueue_script('jquery'); } //エディタ・スタイルシート add_editor_style(); //ギャラリーのスタイルシートの出力を停止 add_filter('use_default_gallery_style', '__return_false');
　functions.phpへの記入ですので、＜？php 　　と　　；　？＞間に記述を書き込んでいきましょう。
次のサンプルのように追加してください。　→　サンプル

続いて、header.phpの編集です。＜body＞タグを次のように修正してください。
header.php <body <?php body_class(); ?>>
　修正することで、＜body＞タグがページごとに異なるクラス名を出力しますので、
cssでデザインしやすくなります。次のように修正してください。　→　サンプル

パンくずリストの追加

　続いてパンくずリストを追加していきます。

–

パンくずリストとは？
上の画像のように、サイトの階層構造を表したリスト。上位のページへリンクから移動しやすくSEO的にもサイト内リンクの改善に役に立ちます。

パンくずリストは、single.phpファイル、category.php
ファイル、date.phpファイルにそれぞれ追記します。

以下の記述を3つのファイルに記入してください。

　パンくずリストをナビゲーションバーのすぐ下に
置きたいので、記述は＜?php get_header(); ?＞の
下に記入（コピペ）してください。

single.php  <div id="breadcrumb"> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo home_url(); ?>" itemprop="url"> <span itemprop="title">トップ</span> </a> › </div> <?php $postcat = get_the_category(); ?> <?php $catid = $postcat[0]->cat_ID; ?> <?php $allcats = array($catid); ?> <?php while(!$catid==0) { $mycat = get_category($catid); $catid = $mycat->parent; array_push($allcats, $catid);} array_pop($allcats); $allcats = array_reverse($allcats); ?> <?php foreach($allcats as $catid): ?> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo get_category_link($catid); ?>" itemprop="url"> <span itemprop="title"><?php echo get_cat_name($catid); ?></span> </a> › </div> <?php endforeach; ?> <div><?php the_title(); ?></div> </div>

single.phpは、次のサンプルのようになります。　→　サンプル
サンプルのように＜?php get_header(); ?＞の下に記入しましょう。
続いて他の2つのファイルも同じように追加しましょう。

category.php  <div id="breadcrumb"> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo home_url(); ?>" itemprop="url"> <span itemprop="title">トップ</span> </a> › </div> <?php $catid = $cat; ?> <?php $allcats = array(); ?> <?php while(!$catid==0) { $mycat = get_category($catid); $catid = $mycat->parent; array_push($allcats, $catid);} array_pop($allcats); $allcats = array_reverse($allcats); ?> <?php foreach($allcats as $catid): ?> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo get_category_link($catid); ?>" itemprop="url"> <span itemprop="title"><?php echo get_cat_name($catid); ?></span> </a> › </div> <?php endforeach; ?> <div><?php single_cat_title(); ?></div> </div>

category.phpは、次のサンプルのようになります。　→　サンプル
サンプルのように＜?php get_header(); ?＞の下に記入しましょう。

date.php  <div id="breadcrumb"> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo home_url(); ?>" itemprop="url"> <span itemprop="title">トップ</span> </a> › </div> <?php if(is_month()): ?> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo get_year_link(get_the_date('Y')); ?>" itemprop="url"> <span itemprop="title"><?php echo get_the_date('Y'); ?>年</span> </a> › </div> <div><?php echo get_the_date('n'); ?>月</div> <?php endif; ?> <?php if(is_year()): ?> <div><?php echo get_the_date('Y'); ?>年</div> <?php endif; ?> </div>

date.phpは、次のサンプルのようになります。　→　サンプル
サンプルのように＜?php get_header(); ?＞の下に記入しましょう。

最後に、cssでパンくずリストの形を整えて、完了です。次の記述をcssに追加してください。

style.css /* パンくずリスト */ .single div#header, .archive div#header { margin: 0px 0px 0px 15px} div#breadcrumb { margin: 5px 0px 0px 15px} div#breadcrumb div {display: inline; font-size: 0.75em}

　設置が終わったら、カテゴリページ、過去ログページ、個別の記事のページのパンくずリストが、

ちゃんと正しい階層にリンクを作ってるのか確認してください。

　テーマにSEO対策を施すのは、完了です。続いて記事投稿をしやすくするためWordPressを
カスタマイズしていきます。

記事投稿のカスタマイズ

　WordPressでは記事の投稿する時、タブを選択することでビジュアルエディタとHTMLエディタの両方を扱うことができます。

　ビジュアルエディタは、htmlタグなどを実際に使用した状態の画面で編集ができ、HTMLエディタは
タグを直接打ち込んで編集できます。

　標準の設定ではビジュアルエディタにはスタイルシートが読み込まれておりませんので、
実際の投稿とデザインの表示が一致せず、そのままでは記事作成がとてもめんどくさいです。

ですので、投稿フォームのビジュアルエディタ用にcssを作ってあげましょう。

　先ほどすでに、functions.phpにエディタ用のcssを利用する設定を記述しましたので、
「editor-style.css」というファイル名でcssをアップロードすれば、適応されます。

次のサンプルを参考に、ファイルをFTPでアップロードしてください。
editor-style.css .mceContentBody {max-width: 590px} /* 記事の幅 */ /* 基本 */ body {font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif background-color: #FFFFFF; background-repeat: repeat-x;} a {text-decoration: none; color: #0c8bcd} a img {border: none} p {font-size: 0.875em; line-height: 1.6} .aligncenter {display: block; margin-left: auto; margin-right: auto} .alignleft {float: left; margin-right: 10px; margin-bottom: 10px} .alignright {float: right; margin-left: 10px; margin-bottom: 10px} .wp-caption {border: solid 1px #aaaaaa; text-align: center; padding-top: 5px}

追加することで、ビジュアルエディタにもcssが適応されます。　→　サンプル
注意点ですが、記事で新たに追加したいcssがあった場合は、style.cssとeditor-style.cssの
両方に記述を追加するようにしてください。
そして追加が終わりましたら、ブラウザのキャッシュを消去してから更新するようにしてください。

ブラウザのキャッシュを消去しないと、editor-style.cssがうまく表示されません。
そこのところだけ気をつけましょう。

« WordPress テーマの作成　基礎ページの作成投稿記事に画像を配置する »

登録タグ: SEO対策　・ WordPress入門講座　・パンくずリスト　・ビジュアルエディタ　 | 2012年4月2日

この記事へのコメント

Pingback: はじめてのWordPress テーマの作成基礎ページ | たなブログ WordPress入門講座()
管理人田中京介

練習書き込みです。
t.Hir

お世話になります。

１つ教えてください。

editor-style.css　をFTPするとありますが、どのディレクトリにFTPすればいいのでしょうか？

WPの管理画面のCSSを変更（＋α）するのだと思うので、Templateのディレクトリではないとおもうのですが。。。

お手数ですが、よろしくお願いいたします。
t.Hir

すみません、できました。Templateディレクトリ内でいいんですね。　有難うございます。。
Pingback: WordPress テーマのカスタマイズ SEO対策 | たなブログ WordPress入門講座 : ちゅどん道中記()

【コメントの投稿の仕方について】

　　　このサイトでは、「Disqus」と呼ばれるコメント機能を使っています。
　　ツイッターやフェイスブックなどにアカウントをお持ちの方は、ログインすることで
　　自分の各プロフィールでコメントすることが出来ます。
　　なんのアカウントもない人もメールアドレスさえ入力すればコメントできます。
　　（入力したメアドはコメント投稿には表示されません。）
　　また、コメント欄には画像を張ることも出来ます。

ひと言コメントや、記事の質問や感想などお気軽にお書きください。
　なにか書いていただけると管理人が嬉しがります。