« »

WordPress テーマの改良 SEO対策

WordPress入門


テーマを改良したり、WordPRessをより使いやすくします。

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

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

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

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

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

functions.php
 functions.phpへの記入ですので、<?php   と  ; ?>間に記述を書き込んでいきましょう。
 次のサンプルのように追加してください。 → サンプル 

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

パンくずリストの追加

 続いてパンくずリストを追加していきます。
パンくずリストとは、このような階層構造を表示したリストのことです。

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

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

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

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

single.php

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

category.php

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

date.php

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

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

style.css

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

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

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

記事投稿のカスタマイズ

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

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

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

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

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

次のサンプルを参考に、ファイルをFTPでアップロードしてください。
editor-style.css  

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

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

 

« »

この記事へのコメント

  • Pingback: はじめてのWordPress テーマの作成 基礎ページ | たなブログ WordPress入門講座()

  • 管理人 田中京介

    練習書き込みです。

  • t.Hir

    お世話になります。

    1つ教えてください。

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

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

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

  • t.Hir

    すみません、できました。Templateディレクトリ内でいいんですね。 有難うございます。。

  • Pingback: WordPress テーマのカスタマイズ SEO対策 | たなブログ WordPress入門講座 : ちゅどん道中記()

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

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


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