WordPress テーマ カスタマイズ

デザイン五輪書

WordPressのテーマを自分流にカスタマイズする

読了までの目安時間:約 38分

 

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

WordPressのテーマを自分流にカスタマイズする

作業の前に・・・

テーマのカスタマイズ

今回は、WordPressのテーマを自分流に改造する際のポイントや手法をご紹介します。

当サイトでは高性能テーマ「THE WORLD」の中の「simple」と言うテーマを推奨していますので、説明の際は勿論、THE WORLDの「simple」を例にしています。
ですが、THE WORLD以外のテーマを使用している方も応用はできると思いますので、ぜひ、最後までお付き合い下さい。

THE WORLDの中の「simple」のユーザーの方は、説明通りに作業を行う事で、迷う事なくテーマをカスタマイズする事ができます。
THE WORLDユーザーの方でも、simple以外のテーマを使用中の方は、説明と使用中のテーマの構成とを見比べながら調整して下さい。

▲もくじへ戻る

カスタマイズを行う上での注意点

今回ご紹介するカスタマイズによって起こる不具合に関しては、自己責任でよろしくお願いします。
私個人的には良かれと思って行っているカスタマイズではありますが、一方で、カスタマイズはテーマ製作者の意図に反する行為でもあります。
ですから、カスタマイズには少なからずリスクが伴います。

リスクとカスタマイズ後の利便性とを天秤にかけた際に、それでもカスタマイズが必要だと思える場合のみ、ご紹介する手法を取り入れてみて下さい。

▲もくじへ戻る

カスタマイズを行う為の必須プラグイン

無計画にカスタマイズしない!

WordPressのテーマのカスタマイズを行う際に、注意をすべき点があります。
それは、できる限り、「テーマ編集」の中身に手を加えないと言う事です。

例えば、カスタマイズをするためにPHPファイル内にCSSを直接書き加えたり、<div>タグや<span>タグを無計画に書き加えたりすると言うのは以ての外です。
どこか使えるタグやidやclassがないかを熟慮して、それでもどうしようもない時にだけ、PHPファイル内に最低限度の手を加えます。

その理由ですが、使用テーマを変更したり、使用中のテーマをアップデートした際、「外観」の中身が全て変更されてしまうからです。
それまで色々行って来たカスタマイズが、全て消されてしまいます。

もし、様々な箇所に無造作に手を加えていた場合、カスタマイズを復旧すると言うのは困難をきたすでしょう。
自分でも把握しきれないほどあちこちに<div>タグを使用していた場合、テーマのアップデートを断念してしまうかもしれません。

▲もくじへ戻る

テーマに左右されないCSS?!

「外観」に手を加えずにカスタマイズを行うなど、到底無理だと思われるかもしれません。
なぜなら、CSSファイルも「外観」の中に入っているからです。

ですが、ご安心下さい。
「外観」の外にCSSファイルを設置する方法があるのです。
「外観」の外にあるCSSの方でカスタマイズを行う事で、テーマの変更やアップデートに左右されない、安定したカスタマイズを行う事が可能なのです。

このCSSを使用する為には、Jetpackと言う多機能プラグインをWordPress内にインストールする必要があります。

実際にJetpackをWordPressにインストールし、設定まで行ってみましょう。

▲もくじへ戻る

Jetpackを導入する

WordPressの「サイドバー」の中に「プラグイン」と言うメニューがありますので、その中の「新規追加」をクリックして下さい。

プラグインの新規追加

「プラグインのインストール」ページが開いたら、検索窓に「Jetpack」と入力し、「プラグインの検索」をクリックします。

プラグインの検索

プラグイン一覧の中に「Jetpack by WordPress.com」と言うプラグインが表示されますので、その中の「いますぐインストール」をクリックします。

いますぐインストール

「本当にこのプラグインをインストールしてもいいですか?」と言うダイアログが表示されますので、「OK」をクリックします。

プラグインのインストールが完了しましたら、「プラグインを有効化」をクリックします。

プラグインを有効化

Jetpackは、有効化しただけでは意味がありません。
WordPress.comのアカウントと連携して、初めて稼働します。

「WordPress.comと連携」をクリックします。

WordPressと連携

「Jetpackの認証」ページが表示されます。
WordPress.comのアカウントを持っている方は認証を行って下さい。
大半の方は持っていないと思いますので、「アカウントが必要ですか?」をクリックします。

Jetpack連携の有効化

WordPress.comのアカウント登録画面が表示されます。
「メールアドレス」、「ユーザー名」、「パスワード」を記入します。
全ての記入が終わったら、「登録」をクリックします。

WordPressのアカウント登録

登録したメールアドレスへ、WordPress.comからメールが送られて来ます。
メールの中の「アカウントを有効化」をクリックします。

メール認証

再び、「Jetpackの認証」画面に戻ります。
「Jetpackの認証」をクリックし、登録したWordPress.comのアカウントとJetpackとを連携します。

Jetpackの認証

これで、多機能プラグインJetpackの全機能が使えるようになりました。
表示されたJetpackの詳細設定画面の中から、必要な機能を「有効化」させて下さい。

この沢山ある機能を説明しているとページ量が大変な事になりますので、Jetpackに関しては別記事にて紹介させて頂きます。

▲もくじへ戻る

カスタムCSSについて

前述した通り、JetpackのカスタムCSSは、「テーマ編集」を書き換える事なく、テーマにCSSを適応する事ができます。
「テーマ編集」とカスタムCSSの記述が競合した場合、カスタムCSSの方が優先されます。

また、便利な構文カラーリング機能、自動インデント機能、CSSルールチェック機能もあるので、とても使いやすいです。
ちゃんとしたエディタソフトを使っているような感覚になりますし、入力ミスも直ぐに分かります。

更に、CSS変更履歴機能があって、テーマを変更したり、何らかのトラブルでカスタムCSSの内容が飛んでしまった場合でも、CSS変更履歴から簡単に中身を復旧する事が可能です。
リビジョン比較画面があるので、ビクビクせず、安心して復旧できます。
加えて、過去の履歴がいくつか保存されますので、好きなだけ遡ることが可能です。

これだけお勧めのカスタムCSSは、WordPressの「メニューバー」内にある「外観」の中にあります。
「CSS編集」をクリックすると、カスタムCSSのページを開く事ができます。

CSS編集

▲もくじへ戻る

行間と段落間の余白の調整

余白が読み手に与える印象

「余白」と書くと、余った空白スペースだとか、余分な空白スペース・・・みたいな印象を持ってしまいがちです。
ですが、余白はデザインにおいて、とても重要な役割を持っています。
グラフィックデザイナーは、常に余白を気にしながらデザインを行っています。

この余白の部分をないがしろにすると、バランスの悪いデザインになったり、文字の可読性を損ねてしまったりします。
逆に、バランスの良いデザインは、余白を計算して使用されていたりします。

文字の可読性の部分ですが、子供向けの本と、受験生用の教科書や大学生向けの専門書を思い浮かべてみて下さい。
どうですか?
漢字や平仮名の割合もそうですが、他にも違いがありませんか?

文字の大きさや行間がまるで違う事にお気付きになりませんか?
子供向けの本の場合、行間が開いていて、とても読みやすいです。
逆に、受験生用の教科書や大学生向けの専門書の場合、行間が狭く、見ているだけで情報量の多さが伝わって来て、読む前からうんざりしてしまいます。

このように、行間一つ取っても、読み手に与える印象はまるで変わってしまいます。
一例ですが、行間が狭いと、緊張感が伝わる一方で、読むのに疲れてしまいます。
逆に、行間が広いと、非常に文章が読みやすくなり、上品さも生まれて来ます。

ウェブサイトの場合、開いた第一印象で、読むか読まれないかが決まると言います。
行間がギチギチで余白が少なく、見るからに文章量が多そうなサイトの場合、文章を読んでもらえるでしょうか?

私だったら、興味ある分野でも、ブラウザの「戻る」でそのページから離脱します。
そのページを読む必要性に迫られた場合は渋々読みますが、そのサイトの管理人の感性を疑います。
余白のない文章を読む際は、段落を間違えないようにマウスでドラッグしながら文章を読まざるを得ませんから、読み手に対する配慮に欠けます。

マウスでドラッグしながら読む

▲もくじへ戻る

THE WORLDの余白設定

では、当サイトで推奨しているTHE WORLDの余白設定はどうなっているのでしょうか?
THE WORLDの初期設定は以下のようになっています。

THE WORLDの行間

行間は0.8文字分程度でしょうか、文字がびっしりと詰まっています。
可読性の良い文章は1文字分程度の行間が必要だと言いますが、若干、行間が狭いように感じます。

この画像を見ると、一つの段落で長文を書いているように思われるかもしれません。
ですが、実は、きちんと段落分けをしています。
ソースコードの画像をご覧下さい。

ソースコード

行間の狭さも気になりますが、最も気になるのが、段落と段落の間の余白が全くないと言う点です。
THE WORLD製作者の方の意図が何かしらあるのかもしれませんが、私は気になりますので、CSSで修正をしています。

この記事を読んでいるあなたなら既に分かると思いますが、当サイトの記事はとにかく文章量が多いです。
にも関わらず、THE WORLDの初期の余白設定のままだと、誰も記事を読んでくれないでしょう。
自分でも、投稿内容の確認をする際にゲッソリしてしまうと思います。

ちなみに、段落間の余白を空けるだけでも、随分と印象が変わります。

段落間

▲もくじへ戻る

余白の設定

文字間の余白を調整する場合、行の高さ(行送り)を調整するCSSと、段落の余白を調整するCSSを使います。
行の高さ(行送り)を調整するCSSは「line-height」プロパティ、段落間の余白を調整するCSSは「margin-bottom」プロパティを使用します。

当サイトの場合、「line-height」プロパティを3文字分、「margin-bottom」プロパティを5文字分に設定しています。
こうする事で、<br>(改行)タグを使用時は2文字分の余白、段落を変える際は7文字分の余白を確保する事ができます。

余白の考え方

コーディングはこうなります。

p {
	line-height: 3em;
	margin-bottom: 5em;
}

▲もくじへ戻る

記事本文にだけ余白を調整

上記のやり方で本文中の文字を読みやすくする事ができますが、困った事に、このままではサイドバーなど、他の部分にも同じ余白ができてしまいます。

サイドバーは横幅が狭いですから、必然的に改行の回数が増えてしまいます。
そのような状態で行間の設定が広いと、かえって読みづらくなってしまいます。
むしろ、サイドバーは初期状態のままの方が良い位です。

そこで、先ほど行った余白の設定を記事本文だけに、限定的に適応する必要があります。
具体的な手法としては、記事本文の部分を<div>タグで囲み、idやclassを指定します。

前述したように、PHPのソースに手を加える方法は望ましくありませんので、勿論、「外観」には手を加えません。
ではどうすれば良いのか・・・と言う事で、実は、私も随分と頭を抱えましたが、THE WORLD独自の構造上、方法が一つだけありました。
実際に作業を行いながら、説明をしたいと思います。

▲もくじへ戻る

<div>タグで記事本文を囲む

THE WORLD以外のテーマを使用中の方は、「外観」の中に手を加えて下さい。
「単一記事の編集」や「固定ページの編集」内にある<?php the_content(); ?>を<div>タグで囲みます。

THE WORLDを使用中の方は、WordPressの「サイドバー」の「外観」中にある「詳細オプション」をクリックします。

詳細オプション

開いた「詳細オプション」のページを下まで下げて、「その他詳細設定」の部分を表示します。
ここの「記事共通コンテンツ上部(任意)」と「記事共通コンテンツ下部(任意)」の部分に記述した内容が、記事本文の上と下に表示されます。

その他詳細設定

「記事共通コンテンツ上部(任意)」の最下部に<div>の開始タグを記述し、「記事共通コンテンツ下部(任意)」の最上部に<div>の終了タグを記述します。
<div>の開始タグには任意のidやclassを指定します。

今回はidを使用して、「article」と指定します。
この「article」ですが、後々にTHE WORLDがHTML5仕様にアップデートされる事を見越して、「article」と指定します。
<article>タグは、記事本文を示すHTML5のタグです。

idに「article」と指定していれば、CSSの書き換えが非常に容易です。
「#」を削除するだけで良いですから。

結果、「記事共通コンテンツ上部(任意)」には以下のように記述します。

<div id="article">

そして、「記事共通コンテンツ下部(任意)」の部分には以下のように記述します。

</div>

結果、ページはこのように構成されます。

<div id="article">
記事本文
</div>

▲もくじへ戻る

CSSの指定を限定的にする

では、CSSの指定箇所を記事本文に限定したいと思います。
既に、CSSには以下の記述をしている状態だと思います。

p {
	line-height: 3em;
	margin-bottom: 5em;
}

このセレクターの「p」の部分に「#article」を書き加えるだけです。

#article p {
	line-height: 3em;
	margin-bottom: 5em;
}

これで、記事本文の段落にだけ、限定的に余白が追加されます。

▲もくじへ戻る

アイキャッチ画像を真ん中寄せで表示!

アイキャッチ画像の位置が気になる・・・

THE WORLDの初期設定では、投稿ページでアイキャッチ画像が右回り、固定ページでアイキャッチ画像が左回りに表示されます。
好みの問題なのですが、私はアイキャッチ画像を真ん中寄せで表示させたいと思う派ですので、とても気になっていました。

また、当サイトは記事の最上部にもくじが来ます。
ですので、アイキャッチ画像の回り込み機能は非常によろしくない。

そこで、CSSに手を加える事にしました。
勿論、「外観」には手を加えず、JetpackのカスタムCSSを使い、元ある回り込み機能を無効化させ、更に、真ん中寄せの設定をします。

▲もくじへ戻る

アイキャッチ画像を中央寄せにするCSS

回り込みを無効化にする場合、以下のCSSを使います。

	float:none;

そして、画像を中央寄せにする場合、通常であれば以下のCSSを使用します。

	text-align:center;

これは、<p>タグや<div>タグなどのブロック要素で囲まれているコンテンツを、ブロック要素内で中央寄せにする際に使用するCSSです。
ですが、ソースコードを確認すると、なぜかアイキャッチ画像にはブロック要素が指定されていません。
画像タグだけがそのまま記述されています。

つまり、このままではアイキャッチ画像を中央寄せにする事はできません。
そこで、画像自体をブロック要素にしてしまうと言うCSSを使用します。

	display:block;

画像が<p>タグや<div>タグなどのブロック要素と同様に扱われるようになりました。
今度は、外側の余白を設定するCSSを使用します。

	margin-left:auto;
	margin-right:auto;

これは、左側の余白と右側の余白を自動にすると言う記述です。
左右が自動になると言う事で、結果的に、画像が中央寄せで表示されます。

▲もくじへ戻る

全ての画像を中央寄せに!?

さて、問題はどうやってアイキャッチ画像をセレクタとして指定するか。

余白を指定する際に使った「#article」を利用する事で、範囲は記事内に限定できます。
ですが、アイキャッチ画像には「id」も「class」も指定されていませんので、これ以上限定的にCSSを指定する事は難しそうです。

そこで、発想を転換してみました。
中央寄せをアイキャッチ画像に限定するのではなく、記事内の全ての画像を中央寄せにしてしまおうと。

結果、以下のようなCSSになりました。

#article img {
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

これで、アイキャッチ画像を含む、記事内の全ての画像が中央寄せで表示されます。

▲もくじへ戻る

大まかな指定方法なだけに・・・

とてもざっくりした指定方法なだけに、この手法ではいくつか不具合が出て来ます。
その部分も許容できる方のみ、作業を行ってみて下さい。

現在確認できている不具合は二点です。

「JetPack」を利用して「Google+」の共有ボタンを記事内で表示させていた場合、あなたの顔写真まで中央寄せになってしまいます。
改行が入って、バランスが少し悪くなります。

もう一点の不具合は、アフィリエイターには痛いかもしれません。

アフィリエイトタグの中には、時々、1pxサイズの画像ファイルが含まれている事があります。
これは、アフィリエイトタグが含まれている記事の表示回数を記録する目的で使用されているのですが、この画像まで中央寄せになってしまいます。

画像はブロック要素に変換されている為、画像ファイルの部分で改行が入ります。
つまり、文章中、意図していない部分で勝手に改行が入ってしまうのです。
1pxサイズの画像ファイルを削除するか、もしくは、改行を受け入れるしかありません。

▲もくじへ戻る

リンクパワー漏れを防ぐ

リンクは検索順位に作用する!?

GoogleやYahoo!での検索には、Googleの検索エンジンが使われています。
このGoogleの検索結果で上位表示する為にあれこれと対策を行う事をSEO対策と言います。
SEO対策には様々な手法がありますが、昔から変わらずに言われている事として、リンクが検索結果に大きな影響を与えると言う点があります。

多くのサイトからリンクを貼られる(紹介される)と言う事は、そのリンク先のページの人気を表す大きな指標とされているのです。
内容が乏しかったり、信ぴょう性のないページは、他のサイトから紹介されるはずがありませんからね。
「リンク数=推薦数」と見なされ、獲得数が多いほど、検索結果で有利に働きます。

それと同時に、リンクを貼ると、リンク元の評価が下がるとも言われています。
つまり、自分のページのリンクパワーを、リンク先に推薦として与えていると言う事です。

また、リンクを貼ると言う行為はリンク先のサイトの内容を第三者にお勧めする(保証する)と言う意味合いがある事から、その責任が生じます。
内容が乏しかったり、信ぴょう性のないようなページにリンクを貼りまくっていると、訪問者のあなたのサイトに対する信用性が大きく損なわれてしまいます。

加えて、Googleからその責任問題をペナルティーと言う形で科せられる事もあるのです。
つまり、検索順位が大きく失墜し、検索サイトからの訪問者が期待できなくなるのです。

ですので、まとめサイトのように無闇やたらにリンクを貼りまくると言う行為は控えたいものです。
そこで生まれたのが、Google独自の「rel="nofollow"」と言うrel属性です。

<a href="リンク先のURL" rel="nofollow">アンカーテキスト</a>

これは、
「リンクは貼りますが、リンク先の内容は推薦しません。」
と言う意思表示をgoogleのクローラー(検索ロボット)に対して行います。

主に、アフィリエイトリンクに使ったり、テーマやプラグインに事前に仕込まれているリンクなどに使用します。
つまり、自分がリンク先の内容を保証できないものに対しては、全て「rel="nofollow"」を貼ります。

逆に、相互リンクや、リンク先の内容をサイトの訪問者にお勧めする目的で貼るリンクに対しては、「rel="nofollow"」を付けません。
相互リンクで「rel="nofollow"」を貼ると、リンク相手に嫌われますよ。

判断が難しいケースは、取り敢えず「rel="nofollow"」を付けておけば問題ありません。

▲もくじへ戻る

リンク部分はどこ!?

前置きが長くなりましたが、実は、THE WORLDも、初期状態で「rel="nofollow"」が貼られていないリンク部分があるのです。
このままでは、あなたのサイトの評価がそこから外部サイトへと漏れ出してしまいます。

さて、リンク漏れを起こしている部分はどの部分だと思いますか?

ソーシャルボタン

そう、ソーシャルボタンの部分です。
この部分は「外観」の中の「functions.php」に記述されています。

「外観」に手を加えますので、THE WORLDのアップデートが行われる度に、自分で再び「rel="nofollow"」を付け直す必要があります。
ですので、このページをブックマークしておくか、あなた自身が作業手順をしっかりと覚えておくかして下さい。

▲もくじへ戻る

ソーシャルボタンを「nofollow」に

では、作業に入ります。
WordPressの「サイドバー」の「外観」から、「テーマ編集」をクリックします。

テーマ編集

「テーマの編集」ページが開いたら、ページ右側を確認します。
ここに、テーマフォルダ内に入っているファイルが一覧表示されています。

テーマフォルダ内のファイル一覧

この中から、「テーマのための関数(functions.php)」をクリックします。
「テーマのための関数(functions.php)」は、ページ中央付近にあります。

テーマのための関数

「テーマのための関数(functions.php)」の編集画面が表示されたら、キーボードの「Ctrl」と「F」を同時入力します。
すると、ブラウザにページ内検索窓が表示されます。

表示された検索窓の中に「<a」と入力し、「Enter」を入力します。

ブラウザ内検索

すると、「テーマのための関数(functions.php)」内にある10個のリンクが強調表示されます。
その中の6~8番目のリンクがソーシャルボタンのリンクです。
それぞれのリンクに「rel="nofollow"」を追加します。

<a href="リンク先のURL" rel="nofollow">アンカーテキスト</a>

ちなみに、5番目のリンクは「UNLIMITED CLUB公式サイト」へのリンクが貼られています。
「rel="nofollow"」が付いていませんので、リンクパワー漏れが心配になる方もいるかもしれません。
ですが、このリンクはWordPressの管理画面内からのリンクですので、気にする必要はありません。

「外観」の中の「詳細オプション」ページの右上にあるリンクです。

Unlimited Club公式サイト

気にする必要はありませんが、気になる方は「rel="nofollow"」を付けても問題ありません。

▲もくじへ戻る

固定ページのh1タグを変える方法

見出しタグの重要性

<h1>タグとは、そのページの内容が何について書かれているのかをクローラー(検索ロボット)に伝える為に、SEO対策上、かなり重要とされているタグです。
その重要度は、<title>タグ(題名)に次いで重要とされています。

WordPressのテーマを見比べる際、良いテーマか悪いテーマかを判断する材料の一つが、この<h1>タグを大事に使っているかどうかです。
h1タグ内に画像ファイルが指定されていたり、全ページ<h1>タグにサイトタイトルが入っているようなWordPressのテーマは問題外です。
私ならば、まず、使いません。

また、WordPressに最初から入っているテーマは、同ページ内で複数<h1>タグを使用していますので、あまりお勧めできません。
<h1>タグは1ページ内に1度きりの使用に抑え、かつ、短い文章を入れるのが効果的とされているのです。

SEO対策の内部対策について書かれている本を読んでいると、どの本でも、<h1>タグ(大見出し)は1ページに1回、<h2>タグ(中見出し)は1~2回、<h3>タグ(小見出し)の使用は5回までに抑えるのが理想的だとされています。
これを目安にテーマを選ぶと良いです。
結構、この見出しタグ部分が全く考慮されていない、ダメダメテーマも普通に出回っていますので、注意が必要です。

▲もくじへ戻る

固定ページの<h1>タグは指定できない!?

THE WORLDは、記事毎に<h1>タグを指定できる機能があります。
この機能はありがたいのですが、問題は固定ページです。

固定ページは、トップページやタグページ、カテゴリーページと同様に、「詳細オプション」で設定した<h1>タグが自動的に使用されます。

h1タグの指定

固定ページを1カラムのランディングページとして使用する場合、記事の内容に沿った<h1>タグを指定できないと言うのは、かなり厳しいです。

そこで、まだあまり詳しくはないPHPの知識を総動員して、固定ページの<h1>タグに任意のキーワードを設定するPHPコードを作りましたので、ご紹介します。

先に書いておきますが、このコードはまだ未完成で、タグページやカテゴリーページの<h1>タグに、最新記事の<h1>タグを引っ張って来てしまうバグが起きてしまいます。
まぁ、それでも、初期状態よりは良いとは思うのですけどね・・・。
PHPの勉強が進み、より知識を身に付けた暁には、このPHPコードの修正版をご紹介する予定です。

▲もくじへ戻る

PHPを使って<h1>タグを設定

<h1>タグを指定する方法として、以下のPHPを使用します。

<h1>
<?php $keyword = get_post_meta($post->ID, _aioseop_keywords, true);
$keywords = explode(',', $keyword);
echo $keywords[0]; ?>
</h1>

このPHPコードの組合せをざっくりと説明すると、メタキーワードの内容を抽出し、その中の一番目のキーワードを<h1>タグの中に書き出します。

具体的な<h1>タグの指定方法ですが、プラグインの「All in One SEO Pack」を使い、固定ページのメタキーワードを記述します。
すると、自動的にメタキーワードに設定した1番目のキーワードが<h1>タグとして設定されます。

さて、上記のPHPコードを使用するのですが、<h1>タグには、既にPHPコードが設定されています。
ですので、既存のPHPコードと上記PHPコードを上手に組み合わせる必要があります。
既存のPHPコードについて説明をしたいのですが、THE WORLD内のPHPコードを公開すると、部分的とは言えども著作権的にマズイと思いますので、ざっくりとした意味だけ説明します。

既存のPHPコードは、トップページの場合、<h1>タグに「詳細オプション」で設定した<h1>タグを当てはめます。
もし、投稿ページだった場合、個別に設定した<h1>タグを使用します。
それ以外のケースだと、<h1>タグに「詳細オプション」で設定した<h1>タグを当てはめるように指定されています。

この、それ以外のケースだと・・・の部分を上記コードに書き換えます。
そして、「それ以外のケースだと、メタキーワードの内容を抽出し、その中の一番目のキーワードを<h1>タグの中に書き出す」と言うような記述に変更するのです。

▲もくじへ戻る

実際にPHPコードを書き換える

では、実際にPHPコードを書き換えてみましょう。
この作業も「外観」の中身に手を加えますので、テーマをアップデートした際は、再記述し直す必要があります。
ですので、このページをブックマークしておく事をお勧めします。

WordPressの「サイドバー」の「外観」の中にある「テーマ編集」をクリックします。

テーマ編集

画面右側にある「テーマフォルダ内のファイル一覧」の中から、「ヘッダー(header.php)」を選択します。
「ヘッダー(header.php)」は、前回選択した「テーマのための関数(functions.php)」の下にあります。

ヘッダー

「ヘッダー(header.php)」の編集画面が開きましたら、キーボードの「Ctrl」と「F」を同時入力します。
表示されたブラウザの検索窓に「</h1>」と入力し、「Enter」を入力します。

検索窓に入力

「ヘッダー(header.php)」内の</h1>タグが強調表示されます。
この</h1>タグの2つ上の行を削除し、この部分に私が考えたPHPコードを入力します。

行を削除

<?php $keyword = get_post_meta($post->ID, _aioseop_keywords, true);
$keywords = explode(',', $keyword);
echo $keywords[0]; ?>

結果、以下のPHPコードになります。

<?php else : ?>
<?php $keyword = get_post_meta($post->ID, _aioseop_keywords, true);
$keywords = explode(',', $keyword);
echo $keywords[0]; ?>
<?php endif; ?>
</h1>

これで、固定ページのh1タグが任意のものに入れ替わっているはずです。

h1タグ変更完了

▲もくじへ戻る

THE WORLD以外の方の場合

THE WORLD以外のテーマを使っている方の場合、以下のPHPコードを<h1>タグ部分に指定する事で、トップページ以外は、メタキーワードの1番目のキーワードを<h1>タグに使用する事ができます。
トップページは、コード内に記述したキーワードが使用されます。

<h1>
<?php if (is_home()) { ?>
トップページに指定したいキーワード
<?php } else {
$keyword = get_post_meta($post->ID, _aioseop_keywords, true);
$keywords = explode(',', $keyword);
echo $keywords[0];
} ?>
</h1>

<h1>タグが画像だったり、サイトタイトルだったりするようなテーマを使っている方にはお勧めの改造です。

▲もくじへ戻る

まとめ

実際にやってみよう!

以上がWordPressテーマのカスタマイズ方法でした。

テーマを改造した事のない方にしてみれば、少し敷居が高く感じるかもしれません。
ですが、この記事の通りに行う事で間違いなくカスタマイズは行えますので、一度挑戦してみるのも良い経験にはなると思います。

WordPressテーマのカスタマイズは、一文字の打ち間違いだけでも、サイトが正しく表示されなくなります。
その恐怖心から敬遠されがちですが、実際にあれこれとカスタマイズする事で、テーマが自分にとって使いやすいものへと変化をしてくれます。

人の好みは千差万別ですから、自分の要求に100%合致するテーマなどあり得ません。
ですが、自分でWordPressのテーマをカスタマイズする事ができれば、その要求に限りなく近付ける事は可能でしょう。
作業効率のアップ、時間短縮にも繋がります。

WordPressテーマのカスタマイズは、知識と経験です。
この記事をキッカケに、あれこれと興味を持ってくれたら幸いです。

この記事が、あなたにとって役に立つものとなりますように。

にほんブログ村 イラストブログ Photoshopへコンピュータグラフィックス ブログランキングへFC2ブログランキングブログランキングならblogram i2iブログランキング

タグ :      

ホームページ作成 WordPress   コメント:0

この記事に関連する記事一覧

TOPへ戻る