WordPressで条件分岐を使って特定のカテゴリーのみを処理対象にしたいこともあります。たとえば、広告表示です。single.phpを開いて記事本文（the_content）の下に広告タグを入力することがあります。

<?php the_content(); ?>
<!-- 広告 -->
<img src="http://…略….png">

この場合、すべての記事の本文下に広告が表示されます。

本文下に表示される広告

それでも問題ありませんが、特定のカテゴリーに属する記事のみに広告を表示したい場合もあります。ここではPHPの条件分岐の構文「if」とWordPress関数を使って対象カテゴリーを限定する方法を紹介します。

「特定のカテゴリーのみ」の条件分岐

特定のカテゴリーに属する記事のみに広告を表示したい場合は、ifとin_categoryを使って条件分岐を組み立てます。たとえば、スラッグが「event」のイベント情報カテゴリーの記事のみに広告を表示する場合は次のようになります。

<?php if(in_category('event')) : ?>
<!-- 広告 -->
<img src="http://…略….png">
<?php endif ?>

「イベント情報」カテゴリーのみに広告が表示されます。その他のカテゴリーに属する記事には広告は表示されません。

指定したカテゴリーのみに広告が表示される

「if」は「～の場合は」を組み立てるPHPの構文です。書式の例は次のようになります。

<?php if(条件を記述) : ?>

<?php endif ?>

複数カテゴリーを対象にする

in_categoryで複数カテゴリーを指定する場合は次のように記述します。この例ではevent、news、campaignの3つのカテゴリーを対象にしています。

<?php if(in_category(array('event', 'news', 'campaign'))) : ?>
<!-- 広告 -->
<img src="http://…略….png">
<?php endif ?>

「キャンペーン情報」カテゴリーの記事にも広告が表示されるようになります。

複数カテゴリーに広告が表示される

カテゴリーアーカイブの条件分岐

まぎらわしい話をします。ここまでに紹介したin_categoryは、その記事が特定のカテゴリーに属するか判断する命令です。そのページが「特定のカテゴリーアーカイブか」の判断ではありません。

表示中のページが特定のカテゴリーアーカイブかどうか判別するにはis_categoryを使います。たとえば、スラッグが「campaign」のキャンペーン情報カテゴリーのアーカイブのみを対象にする場合は、次のようになります。

<?php if(is_category('campaign')) : ?>
<!-- 広告 -->
<img src="http://…略….png">
<?php endif ?>

キャンペーン情報のアーカイブのみに広告が表示されます。

特定のカテゴリーアーカイブのみに広告を表示する

複数カテゴリーを対象にする場合は次のように記述します。

<?php if(is_category(array('event', 'news', 'campaign'))) : ?>
<!-- 広告 -->
<img src="http://…略….png">
<?php endif ?>

あとは試行錯誤してみてください。

ロリポップにインストールしたWordPressではwp-config.phpが編集できない場合があります。実際にロリポップFTPでwp-config.phpを開いてもカーソルが入らず編集できません。

ロリポップFTPでwp-config.phpが編集できない

これは、wp-config.phpが書き込み禁止になっているためです。以下、対策を紹介します。

編集不可のwp-config.phpを確認

ロリポップFTPやFTPソフトでWordPressのwp-config.phpを確認します。

ロリポップFTPの場合

ロリポップのユーザー専用ページにログインして、「Webツール」‐「ロリポップ！FTP」メニューからWordPressをインストールしたフォルダを開くと、wp-config.phpが見つかります。

wp-config.phpを開く（ロリポップFTP）

開いてみると「このファイルの書き込み権限がありませんので、内容の変更はできません。」と書かれているように、このファイルは編集できない状態になっています。

wp-config.phpは編集できない状態

FTPソフトの場合

FTPソフトを使っている場合は、wp-config.phpのプロパティを見てパーミッションを確認すると、書き込み権限がないことがわかります。

wp-config.phpに書き込み権限がない

wp-config.phpに書き込み権限を与える

wp-config.phpを編集するには、書き込み権限を与えて編集可能にする必要があります。

ロリポップFTPの場合

ロリポップFTPでは、「オーナー」の「書き込み」をチェックします。

書き込み権限を与える

画面を下にスクロールして「保存」ボタンをクリックします。

「保存」ボタンをクリック

これで、wp-config.phpが編集できる状態になります。

wp-config.phpが編集可能な状態に

FTPソフトの場合

FTPソフトで設定する場合はパーミッションをチェックした画面で「所有者」（オーナー）の書き込み権限をチェックします。

wp-config.phpに書き込み権限を与える（FTPソフトの場合）

「OK」ボタンをクリックして画面を閉じると設定完了です。これで、wp-config.phpを編集できるようになります。

evalとbase64_decodeと聞いて、PHPの経験がある方はピンとくるかもしれませんが、この2つは単なるPHPの命令のコンビではありません。もしかすると、サイトがハッキングされて改ざんされていることの兆候かもしれません。ここでは、WordPressでも増えている「eval＋base64_decode」による改ざんの仕組みを紹介します。

パッと見て改ざんに気づかないコードの仕組み

あなたのサイトにアクセスすると見知らぬサイトに飛ばされたり、画面が真っ白になる。おかしな問題が起きるので、もしかして改ざんされたかもと思って原因を調べていて、ふと開いたPHPファイルに次のようなコードが書いてあったら、どうでしょうか。

<?php
header("Location: http://example.com/");
?>

PHPの厳密な意味がわからなくても、身に覚えのないURLが突然出てくれば、なんとなく「このファイル、改ざんされている？」とか「このコードが問題の原因？」とピンとくるかもしれません。実際、このコードのせいで、ページを表示すると「http://example.com/」に飛ばされてしまいます。

この例は親切なハッカーによるサイト改ざんと言えるかもしれません。パッと見て不正なコードかどうか判別しやすいからです。

では、次のコードはどうでしょうか？

<?php
eval(base64_decode('aGVhZGVyKCJMb2NhdGlvbjogaHR0
cDovL2V4YW1wbGUuY29tLyIpOw=='));
?>

開いたPHPファイルにこのようなコードが書いてあっても「なんとなく難しそうなコードが書いてあるな」くらいの印象かもしれませんが、実は、サンプルコード2はサンプルコード1と同じ結果になります。

サンプルコード1の「header…」を暗号化すると、「aGVhZGVyKCJMb2N」のような意味がわからない文字になります。これを復号して実行しているのがサンプルコード2だということです。

eval＋base64_decode＝改ざんの定番

これが、改ざんされたWordPressでよく見られる不正なコードの定番パターンで「eval」と「base64_decode」の組み合わせが目印です。

<?php
eval(base64_decode(暗号化された怖いコード));
?>

暗号化された怖いコードをbase64_decodeで復号して実行する仕組みにすることで、改ざんされていることに気づきにくいので注意が必要です。

そもそも、正規のWordPressシステム内では「eval」と「base64_decode」を組み合わせた処理は存在しません（WordPress 4.6.1時点）。eval＋base64_decode＝改ざんの兆候だと疑ってみた方が良いでしょう。

改ざん原因のNo.1は簡単すぎるパスワード

とりあえずの対策は、見つかった「eval＋base64_decode」のコードを削除することですが、システムのあちこちに埋め込まれていることが考えられるので再インストールするのが現実的です。

それ以前に、改ざんされる原因のダントツ1位は簡単すぎるパスワードです。4桁の数字などは論外ですが、サイトのURLやユーザー名から類推されるパスワードも危険です。たとえば、「http://example.com/」で使っているパスワードがexample1234だったりするのは、「どうぞ、お入りください」と言っているようなものです。ご注意ください。

パスワードの強度をアップするヒントは以下のページも参考にしてください。

簡単すぎて危険なパスワードにひと手間かけて強度アップするヒント

WordPressで画面に表示された投稿日時や投稿者名などを消したいという要望は多いです。良いか悪いかは別ですが。この記事では、サイトで画面から投稿日時や投稿者、カテゴリーなどの文字を消すために、CSS、jQuery、PHPを使う方法を紹介します。

投稿日時などを画面から消したい

文字を消すというと「PHPの修正が必要？」と思ってしまうかもしれませんが、必ずしもテンプレートの修正は必要ありません。CSSやjQueryで消すこともできます。あくまでおおざっぱな考え方の説明ですが、参考にしてください。

CSSの「display: none;」で非表示にする

CSSで「display: none;」を使うと、任意の要素を非表示にすることができます。それには、表示中のページのHTMLを見て、消したい部分のclassまたはIDを指定します。

たとえば、記事タイトルの下にある投稿日時、投稿者、カテゴリーをまとめて消したいとします。

投稿日時・投稿者・カテゴリーを消したい

このテーマの場合、この部分のclassやIDを探すと「entry-meta」というクラス名が付いていることがわかります。

消したいパーツのclassやIDを探す

この部分に対して「display: none;」を指定します。

/* 投稿日時・投稿者・カテゴリーを消す */
.entry-meta {
    display: none;
}

投稿日時・投稿者・カテゴリーがまとめて消えます。

消したかった部分が消える

この方法で消すときの注意点は、CSSセレクタです。上記のように「.entry-meta」と指定すると、サイト全体に影響します。それでは困る場合は「.single .entry-meta」などのようにCSSの適用場所を制限する必要があります。

また、念のため注意ですが、「.entry-meta」はこの記事の例です。すべてのテーマで同じクラス名とは限らないので注意してください。

投稿日のみを消す場合

投稿日（公開日）のみを消したい場合は、投稿日を囲むクラスやIDを探します。

投稿日のクラス名を調べる

「entry-meta__item」や「published」というクラスが設定されていますが、「entry-meta__item」は他のアイテムと共通の名前でしょうし、「published」は他のパーツでも使っているかもしれないので、次のようなCSSでは他に影響が出るかもしれません。

/* 投稿日を消す */
.published {
    display: none;
}

影響が出た場合は、CSSの適用場所を限定します。たとえば、次のようなCSSを組み立てます。

/* 投稿日を消す */
.entry-meta__item.published {
    display: none;
}

これで、投稿日のみが消えます。他に影響が出ていれば、さらにCSSセレクタを工夫する必要があります。

投稿日のみが消える

jQueryの「replace」で非表示にする

投稿日を消すときに、日付は残して「公開済み:」のような文字だけをピンポイントで消したいこともあります。

特定の文字をピンポイントで消したい

HTMLを調べると、「公開済み: 2014年7月18日」までが1つのタグで囲まれているので、CSSで「公開済み:」の部分だけを消すのは難しいです。

特定の文字だけを消しづらい

その場合、jQueryで消す方法があります。以下、「公開済み:」を消すjQueryの例を紹介します。

jQuery('.entry-meta__item').each(function(){
    var txt = jQuery(this).html();
    jQuery(this).html(txt.replace(/公開済み:/,''));
});

「.entry-meta__item」というクラスに含まれる「公開済み:」という文字だけを消しています。

一部の文字だけが消える

「カテゴリー:」も合わせて消す場合は次のように指定します。

jQuery('.entry-meta__item').each(function(){
    var txt = jQuery(this).html();
    jQuery(this).html(txt.replace(/公開済み:|カテゴリー:/,''));
});

「公開済み:|カテゴリー:」で「公開済み:」または「カテゴリー:」という条件になります。これで、「公開済み:」と「カテゴリー:」が消えます。

狙った文字だけ消える

あくまでやっつけの方法なので、本格的に使うときは十分にご注意ください。

PHPをコメントアウトして画面から消す

CSSやjQueryで文字を「非表示」にするのが面倒であればPHPを編集して文字を消すことができます。

それには、文字を消したいパーツが含まれるテンプレートを開いて（できれば子テーマにコピーして）、該当する部分をコメントにします。

消したいコードが見つかる

ただし、次のようなHTMLコメントではうまくいかないので要注意です。

HTMLコメントではうまくいかないので注意

PHPコードをHTMLコメントで囲むとコメントアウトがうまくいきません。次の例でもHTMLコメントの終了タグが残ってしまいます。

PHPのコメントアウトに失敗している

PHPはPHPの書式でコメントにします。いくつかの方法がありますが、たとえば、命令の前にスラッシュを2つ（//）入力します。

PHPとしてコメントアウト

これでPHPから出力される内容もコメントになって画面から消えます。

PHPから出力される部分も消える

まとめ

画面から文字を消す場合、必ずしもテンプレートを開いてPHPを修正する必要がないことが理解できたでしょうか。もちろん、毎回jQueryで非表示にする方法が良いかどうかは微妙な問題だったりするので、CSS、jQuery、PHPの3つのパターンで非表示にする方法を覚えておくと便利です。

吹き出しを使って会話風のコンテンツを作りたいこともあります。お客様の声やよくある質問に限りませんが、単調なデザインに変化を付けて効果的に演出できるかもしれません。

吹き出しを使って会話風のコンテンツを作りたい

ここでは、Speech bubbleプラグインを使って吹き出しを作る方法を紹介します。会話風のコンテンツ作成にご活用ください。

吹き出しを使った会話風コンテンツの作り方

Speech bubbleプラグインのインストール

「プラグイン」‐「新規追加」メニューからSpeech bubbleプラグインをインストール、有効化します。

Speech bubbleプラグインのインストール

インストール後の特別な設定は不要です。続いて、吹き出しを作りたい投稿や固定ページの編集画面を開きましょう。

吹き出しショートコードの入力

難しい説明をする前にさっそく吹き出しの会話を作ってみましょう。それには、次のショートコードを投稿または固定ページの編集画面に入力します。

[speech_bubble type="ln" subtype="L1" icon="1.jpg" name="左側さん"]
左側の吹き出しです。吹き出しのパターンはいろいろ変えられます。
[/speech_bubble]

[speech_bubble type="ln" subtype="R1" icon="2.jpg" name="右側さん"]
右側の吹き出しです。しゃべっている人のアイコンは画像に変えられます。
[/speech_bubble]

これにより、会話が吹き出しで表示されます。2つのショートコードを使っていますが、それぞれが左側、右側の吹き出しになることで、会話風に見える仕組みです。

吹き出しで会話が表示される

基本的な会話の設定

ショートコードはさまざまなカスタマイズが可能ですが、簡単に会話形式のコンテンツを作りたい方もいるでしょうから、まずは、最低限の設定を紹介します。

会話の基本設定（左右区分・アイコン・人名・セリフ）

• 左か右かの区分（subtype属性） --- 左側は「L1」、右側は「R1」を指定（他にも設定できますが、ひとまず）
• アイコン（icon属性） --- 人物画像（初期設定では1.jpgまたは2.jpgを使用可能）
• 人物名（name属性） --- 「田中さん」や「インタビュアー」などを指定
• セリフ --- 吹き出しの内容を指定

各項目を設定して、ショートコードを編集してみましょう。左右区分やアイコンは必須ではないので、最低限、人名とセリフを直せば機能します。ここでは、次のようなショートコードに変更してみました。

[speech_bubble type="ln" subtype="L1" icon="1.jpg" name="先生"]
Speech bubbleプラグインの使い方はわかりましたか？
[/speech_bubble]

[speech_bubble type="ln" subtype="R1" icon="2.jpg" name="生徒"]
はい。ショートコードを使って簡単に吹き出しの会話ができるんですね。
[/speech_bubble]

[speech_bubble type="ln" subtype="L1" icon="1.jpg" name="先生"]
ショートコードをカスタマイズすれば、見た目もいろいろと変更できますよ。
[/speech_bubble]

[speech_bubble type="ln" subtype="R1" icon="2.jpg" name="生徒"]
そうなんですか。さっそく教えてください！
[/speech_bubble]

左、右、左、右の順で吹き出しを作っていけば、会話が続くスタイルで吹き出しを表示していくことができます。

吹き出しを使った会話が続く

あとは、あなたのアイデア次第です。お客様の声や、よくある質問に使っても良いでしょうし、難しそうな話を会話調で組み立てればわかりやすく説明できるかもしれませんね。

吹き出しショートコードのカスタマイズ

少し説明しましたが、吹き出しを作るspeech_bubbleショートコードには4つの属性があります。

• type属性 --- 吹き出しのタイプ（デザインテンプレート）
• subtype属性 --- 左側か右側かの区分
• icon属性 --- 人物のアイコン画像
• name属性 --- 人物名

4つの属性についてカスタマイズパターンを簡単に説明します。

吹き出しタイプの設定

type属性では9種類の吹き出しタイプを指定できます。それぞれ、吹き出しのデザインが異なります。以下、イメージを紹介します。

• std
  

  「type="std"」のイメージ

• fb
  

  「type="fb"」のイメージ

• fb-flat
  

  「type="fb-flat"」のイメージ

• ln
  

  「type="ln"」のイメージ

• ln-flat
  

  「type="ln-flat"」のイメージ

• pink
  

  「type="pink"」のイメージ

• rtail
  

  「type="rtail"」のイメージ

• drop
  

  「type="drop"」のイメージ

• think
  

  「type="think"」のイメージ

サイトのイメージに合わせて選んでください。

左右区分の設定

subtype属性を使って左側（L）なのか右側（R）なのかを設定できますが、それぞれの吹き出しスタイルを変えることもできます。

• L1・R1 --- 会話風の吹き出しになります。
  

  L1・R1の場合

• L2・R2 --- 考えているような吹き出しになります。
  

  L2・R2の場合

L1とR1は必ずしもパッケージというわけではありません。左側がL1、右側がR2という使い方で変化を付けることもできます。すべてはアイデア次第です。

左側のsubtypeがL1、右側がR2の場合

アイコンの設定（好きな画像を使いたい）

人物アイコンはicon属性で設定します。アイコン画像はプラグインのimgフォルダ（wp-content/plugins/speech-bubble/img）に格納します。初期設定では1.jpgと2.jpgが含まれるため、「icon="1.jpg"」や「icon="2.jpg"」によって左右の人物のアイコンを切り替えて会話風に仕上げられるということです。

好きな画像をアイコンに使う場合は上記のimgフォルダに画像を格納して、icon属性で指定します。使える画像の種類は次のとおりです。

• jpg
• png
• gif
• svg
• tif

アイコン画像をimgフォルダに保存

好きな画像をアイコンに使いたい場合は、その画像をimgフォルダに保存します。ここでは「left.jpg」と「right.jpg」を準備しました。

アイコンに使う画像を準備

icon属性で画像ファイル名を指定

ショートコードのicon属性でファイル名を指定します。たとえば、「icon="left.jpg"」などです。

準備した画像をアイコンに使った例

type属性で指定した吹き出しタイプによっては、アイコンの表示イメージが違ってきます。いろいろと試してみてください。

名前が不要な場合

会話している人物名が不要な場合は「name=""」のように名前を空にする方法があります。

名前を消す

すべての属性を省略した場合

各属性の初期設定は次のようになります。指定しなかった場合は、これらの設定が使われます。

• type属性 --- std
• subtype属性 --- L1
• icon属性 --- 1.jpg
• name属性 --- no name

すべて省略すると、L1（左側）の「no name」さんの吹き出しになります。

すべての属性を省略した場合

まとめ

このようにSpeech bubbleプラグインを使うと、吹き出しを使った会話風コンテンツを簡単に組み立てるとができます。単調になってしまう「よくある質問」や「お客様の声」などにもアイコン画像などを工夫することで、お客様に訴求するコンテンツを作成できるでしょう。いろいろと試行錯誤してみてください。

WordPressで画面が真っ白になると大きなトラブルが起きたように思うかもしれませんが、多くはPHPの入力ミスです。定番のミスの原因を3つ紹介します。ご注意ください。

半角で入力する文字を全角で入力している

設定ファイル（wp-config.php）を編集するときに、データベース名やユーザー名、パスワードを変更することがあります。

ただし、次のように編集すると画面が真っ白になったり、「データベース接続確立エラー」（Error establishing a database connection）と表示されます。

define('DB_NAME', ’test_db1’);

何がおかしいのかピンとこないかもしれませんが「記号は半角で入力！」という点でチェックしてみてください。「'」と入力すべき記号が全角の「’」になっています。非常にわかりづらいので拡大してみます。

半角と全角の違い

どうでしょうか。DB_NAMEを囲むシングルクォーテーション「'」は半角です。これは問題ありませんが、test_db1を囲んでいるのは全角の「’」です。これが原因で画面が真っ白になります。

ここまで拡大しても気づかない方がいるかもしれませんが、それくらいわかりづらいです。実際、ここに気づかずにWordPress個別サポートに相談される方がかなり多いです。ご注意ください。

PHPの開始・終了タグが釣り合っていない

PHPのコードは開始タグ <?php で始まり、終了タグ ?> で終わります。functions.phpのように、HTMLを含まないファイルの場合は終了タグが存在しない場合がありますが、原則的にPHPは <?php ～ ?> の間に記述します。

たとえば、既存のコードが次のように入力されているとします。

<?php
/* 既存のコード */


?>

ここに新たなPHPのコードを追加するとします。

<?php /* 新たなコード */ ?>

次のように追加すると画面が真っ白になります。PHPのタグが閉じていないのに2つ目の開始タグ <?php が書かれているためです。

<?php
/* 既存のコード */

<?php /* 新たなコード */ ?>
?>

この場合、新たなコードの前後にあるPHPの開始・終了タグを取り除けば大丈夫です。

<?php
/* 既存のコード */

/* 新たなコード */
?>

または、前のPHPの終了タグが終わってから新たなコードを入力します。

<?php
/* 既存のコード */

?>
<?php /* 新たなコード */ ?>

難しく思えるかもしれませんが、PHPの開始タグが閉じてから、次の開始タグを入力するということです。つまり、開始タグが閉じていないのに次の開始タグを入力してはダメです。

全角のスペースが入っている

次のコードは「WordPressアドレスの修正ミス」に対処するときに使いますが、wp-config.phpに入力すると画面が真っ白になります。どこが間違っているか、わかりますか？

define('WP_SITEURL', 'http://example.com');　

正解は「行末の ; の後に全角スペースが入っている」です。わかりづらいですね。FTPツールを使っていると全角スペースが見えない場合があるので、一生懸命に間違いを探しても見つからないかもしれません。

そのような理由でPHPファイルの編集にはテキストエディタが欠かせません。

テキストエディタなら全角スペースが見える

全角スペースも見えるので、エラー原因がすぐに見つかります。

上記の例は行末の全角スペースでしたが、途中に入力するスペースも全角はダメです。たとえば、次のコードを入力すると画面が真っ白になります。

define('WP_SITEURL',　'http://example.com');

全角スペースがダメというのは、最初に紹介した「記号は半角で」と同じことです。基本的にプログラミング言語は半角で入力する必要があります。その中でも、スペースが半角なのか全角なのかは非常に紛らわしいので注意してください。たった1文字で画面が真っ白になります。

まとめ

以上、画面が真っ白になる原因としてPHPの典型的な入力ミスのパターンを3つ紹介しました。画面が真っ白になるとすぐに「再インストールが必要？」と、とんでもない方向に意識を向ける方がいますが、ほとんどの原因は単なる入力ミスです。

編集したファイル、入力したコードをじっくり見てください。ほとんどの原因は、そこにしかありません。

WordPressでテンプレートの中にショートコードを入力したいこともあります。活用法はさまざまですが、たとえば、すべての記事の下にContact Form 7の問い合わせフォームを表示することもできるので非常に便利です。

ショートコードを使って記事下にContact Form 7の問い合わせフォームを表示

「テンプレート　ショートコード」でネット検索すると「do_shortcode」という命令が見つかるかもしれませんが、PHPに慣れていないと編集がうまくいかないこともあります。その仕組みを含めて使い方を簡単に紹介します。

テンプレートに入力したショートコードがそのまま表示される

すべての記事の下にお問い合わせフォームを表示したい場合、個別記事テンプレート（single.phpなど）のthe_contentの下あたりに、おなじみのContact Form 7のショートコードを入力することを思い付くかもしれません。

ところが、テンプレート内で次のようにショートコードを入力してもうまくいきません。

ショートコードをそのまま入力してもうまくいかない

ショートコードがそのまま表示されてしまいます。

ショートコードがそのまま表示される

テンプレート内のショートコードにはdo_shortcodeを使う

テンプレートの中でショートコードを使いたい場合、do_shortcodeという命令を使います。次のようなイメージです。

<?php
echo do_shortcode('ここにショートコードを入力');
?>

1行にまとめても大丈夫です。

<?php echo do_shortcode('ここにショートコードを入力'); ?>

基本的にショートコードはシングルクォーテーションの' と ' の間に入力します。Contact Form 7のショートコードで使うイメージは次のようになります。

Contact Form 7のショートコードに適用

これで、お問い合わせフォームが表示されるようになります。

メールフォームが表示される

do_shortcodeの失敗例

このようにdo_shortcodeを使うとショートコードの内容を画面に表示できますが、PHPの文法を守らないとうまくいきません。以下、失敗例をいくつか紹介します。

do_shortcodeはPHPの開始・終了タグで囲むこと

do_shortcodeはPHPの命令なのでPHPの開始・終了タグで囲む必要があります。次のように裸で入力してもうまくいきません。

<?php the_content(); ?>
echo do_shortcode('ショートコード');

正しくはPHPの開始・終了タグで囲みます。

<?php the_content(); ?>
<?php
echo do_shortcode('ショートコード');
?>

ショートコードは半角の「'」で囲むこと

ショートコードは文字なので、do_shortcodeで呼び出すときはdo_shortcode('ショートコード')のように半角のシングルクォーテーション「'」で囲む必要があります。次の2つはいずれも間違いです。

echo do_shortcode(ショートコード);
echo do_shortcode(’ショートコード’);

1行目はショートコードを「'」で囲んでいません。2行目はショートコードを囲んでいるのは全角の「’」です。このサイトで何度も同じことを書いていますが、本当に紛らわしいので注意してください。シングルクォーテーション「'」は半角で入力です。

do_shortcodeはechoで出力すること

do_shortcodeで指定したショートコードを画面に表示するにはechoを使います。つまり、次のコードはうまくいきません。

<?php
do_shortcode('ショートコード');
?>


正しくは次のようになります。


<?php
echo do_shortcode('ショートコード');
?>

うまくいかないときは、入力したコードを入念にチェックしてみてください。「プラグインのバグ？」など、とんでもない方向に想像をふくらませるのは止めましょう。WordPressトラブルのほとんどの原因は単純な入力ミスです。

個人的に使っているノートPC（ASUS VivoBook X202E）のHDDをSSDに交換してみました。いまさらですが。結果、ビックリするほど高速になりました！何を起動しても一瞬で立ち上がります。まさに「爆速」と言いたいくらいです。

正直、これほど速くなると思っていませんでした。本当は本体を買い換えようかと思ったのですが、ふと「SSDに交換したら速くなる？」と思いつき、チャレンジしてみました。今のところは大正解だったようです。

みなさんも、同じようにHDDからSSDへの換装を考えている方で、こんなことが不安な方もいると思います。

• SSDって寿命とか大丈夫なの？
• HDDの交換って結構大変なのでは？
• SSDを取り付けた後のデータ移行が面倒では？

私も普段はPCの自作やパーツ交換などしないので作業する前は不安でしたが、実際にチャレンジしてみたら、そのような心配は不要でした。マシン環境によるかもしれませんが。

以下、HDDからSSDに交換した手順を簡単にまとめておきます。同じようなことを考えている方の参考になればと思います。

HDDからSSDに交換する前に不安だったのは「寿命」

HDDから交換する前に不安だったのはSSDの「寿命」です。だいぶ前から「SSDは高速だけど突然寿命がくる」という噂も聞いていたので。ですが、それは昔の話らしいです。最近のSSDは信頼性もアップしていて、「SSD　寿命」で検索すると、最近の記事では「SSDの寿命は長くなった」とか「HDDよりも寿命が長い」という記事も見つかります。

もちろん、使用状況によっても違うとは思いますが。

今回SSDに交換しようと思ったのも、耐久試験の記事をいくつか見ていたら予想以上に寿命が長いことを知ったからです。気づくのが遅いですが、、、

たとえば、次のようなページです。

Intel・SamsungなどのSSDがどれぐらいの寿命なのか長期間の耐久テストで判明

190年以上は大丈夫かもという話もありました。もちろん、使用環境にもよりますが、少なくとも1年くらいで「突然寿命が！」ということはなさそうです。

SSDをソフマップで購入した理由

そんなわけで、上記のレポートでも取り上げられていたSamsungのSSDに決めて、値段や容量からSamsung SSD 500GB 850 EVOに目星をつけました。

さっそくアマゾンで「17,000円くらいかな」の価格イメージをつかんでヨドバシに。ところが、高いだろうなと覚悟して突撃したヨドバシでは、アマゾンより想像以上に高い！仕方ないので秋葉原の街へ。

めったに買い物しないソフマップで価格チェックするとアマゾンに匹敵する値段。税込は17,000円くらいでしたがヨドバシよりかなり安いビックリ価格！ということで購入しました。もちろん、ソフマップだからといって中古ではなく新品です。

さらに、レジでもう1つのビックリ。店員さんから「保険かけますか？」の一言が。意味がわからなかったのですが、ソフマップでは「安心交換サービス」という「保険」サービスがあるらしいです。

昔はメモリとか購入するときに相性が合わなかったときに交換してくれると助かったものですが、それと同じようなものです。むしろグレードアップしていて、購入した商品を使ってみてダメだったら交換または返金してくれるというもの。

今回はHDDからSSDへの換装なので万が一の失敗もあるわけですが、そんな場合でも、開封後でもダメだったSSDをもってくれば返金してくれるという、なんとも素晴らしい保険です。ソフマップでは何度か買い物してますが、このサービスは知りませんでした。

このサービスのおかげで安心して作業できたというのもあります。いくら安いとはいえ、SSD交換がうまくいかなくて20,000円がパーになるのはガッカリですから。

関係者ではありませんが「ソフマップの安心交換サービス、最高！」と書いておきます。みなさんも、不安なパーツ交換のときは頼ってみてはいかがでしょうか。

あと細かい話ですがSSDだけでは作業できません。SATA／USBの変換ケーブルも必要ですね。データ移行の際に現在のPCとSSDをつなぐためです。忘れずに購入しましょう。

SSDへの交換作業は簡単・待ち時間が長いだけ

さて、HDDからSSDへの交換ですが、昔のイメージではHDD交換が異常に大変だったような気がするので不安でいっぱいでした。今回は移行手順が以下のページに詳しく掲載されていたので助かりました。良い時代になったものです。

SSD 850 EVO シリーズ | Samsung SSDシリーズ

ざっくりと手順をまとめるとこんな感じです。

• データ移行（現在のHDDからSSDに）
• PCのカバーを開ける
• HDD取り外し
• SSD取り付け
• PCのカバーを閉める

いろいろ大変そうですが、実際に時間がかかったのはデータ移行くらいで、それ以降の交換自体は30分くらいです。

逆に言えば、SSD交換前のデータ移行に時間がかかる場合があります。もちろん、HDDの容量にもよりますが、私の500GのHDDは6時間くらいかかりました。

HDDからSSDへのデータ移行

まずはデータ移行です。今のHDDのデータを丸ごとSSDに移転することで、媒体を取り換えれば何事もなかったようにPCが立ち上がる。そんなイメージです。間違っても先に空っぽのSSDを取りつけないことですね。OSやら各種データやら、どうやって移行するのか途方にくれちゃいますよね。

そんなデータ移行ですが、ソフトウェアがあったので簡単でした。ただ、私のノートPCにはドライブがないので移行ソフトはダウンロードしました。

Data Migration Softwareデータ移行ソフトウェアダウンロード

あとは指示に従って進めていけば大丈夫ですが、強いて注意点を挙げると現在のHDDをパーティション分割しているときでしょうか。初期設定ではCドライブのみなのでDドライブに分割している場合は「+」をクリックして移行先にDドライブを追加します。

移行先にDドライブを追加

そんな点に注意してHDDをSSDにコピーします。私のPCでは500Gの移行に6時間くらいかかりました。一応、USB3.0です。夜に始めたのでそのままにして、朝起きたら無事終わってました。

カバーを開けてHDDをSSDに交換

コピーが終われば「HDDの内容＝SSDの内容」なので、取り換えれば完了です。ゴールが見えてきますね。

昔、HDDを外して交換するのに異常に苦労した記憶があるのですが、カバーを開けてみたらHDDの取り外しもSSDの取り付けも簡単でした。

HDDからSSDへの交換完了

カバーを開けて交換して閉めるまで30分くらい。あっという間でした。強いて注意点を挙げれば、HDDを筐体に固定する金具を取り外してSSDに取りつけることでしょうか。見ればわかりますが。

カバーを閉めて作業完了です。

SSDに交換したら「何もかも一瞬で起動」

新たに生まれ変わったマシンの電源をON！すると、2～3秒でWindowsが立ち上がりました。

これにはびっくりです。最新のマシンを使っている方には感動もないでしょうが、今まで普通のPCを使っていた私には表現しようのない驚きです。

そして、Officeもその他のソフトも一瞬で起動して、、、「なんじゃこりゃ！」と叫びたいくらいです。今までの待ち時間はなんだったんでしょうか。高速化ソフトを入れて細かく起動速度を改善していたのがアホらしくなるくらいです。

大げさですが「何もかも一瞬で起動するようになった」くらいの体感です。

さらに、インターネットもサクサク、軽快に。結局、ホームページの表示が遅いのはネットワークの問題もありますが、ディスクの読み書きの問題も大きいってことですね。SSDに交換してみてよくわかりました。

事実、「このサイト、表示遅いなー」と思っていたサイトも軽快に表示されるようになりました。なんだ、自分のマシンのHDDが遅かっただけなのか。もっと早く気付けば、、、

まとめ

HDDをSSDに取り換えるだけの単純な作業でしたが、私のノートPCは完全に別のマシンに生まれ変わった感じです。これからはもう少し良い仕事ができると思います。たぶん。

本体を買い換えようか迷ったのですが「SSDに交換して大正解！」です。

みなさんも、こんな悩みをお持ちの方はHDDをSSDに交換してみてはいかがでしょうか。結果は保証しませんが。

• Windowsの起動が遅い
• Officeなどのソフトウェアの起動が遅い
• インターネットのページ表示が遅い

参考までに私のマシンの環境を書いておきます。

• CPU：Core i5 3317U(Ivy Bridge)/1.7GHz/2コア
• HDD容量：500GB
• メモリ容量：4GB
• OS：Windows 8 64bit

あと、突然の寿命に備えるため、順次、重要なデータはonedriveへ移行する予定です。

カスタムフィールドを出力するにはPHPのコードを記述する必要があります。ここでは、Advanced Custom Fieldsプラグインで作成した定番のカスタムフィールドを画面に表示する例で説明します。

具体的には3種類のカスタムフィールドを取り上げます。

• テキストフィールド --- 文字を入力するフィールド
• 画像フィールド --- 画像をアップロードするフィールド
• ファイルフィールド --- ファイルをアップロードするフィールド

表示イメージは次のようになります。イベント情報の記事の中で3種類のカスタムフィールドを使っています。

3種類のカスタムフィールドの表示結果

出力するカスタムフィールドの準備

ここではAdvanced Custom Fieldsプラグインを使って次のようなカスタムフィールドを準備しました。

作成したカスタムフィールド（テキスト・画像・ファイル）

それぞれのフィールドの用途は次のとおりです。

• キャッチコピー（テキストフィールド） --- イベントの説明を文字で入力・表示
• イベント画像（画像フィールド） --- イベントのイメージ画像をアップロードして表示
• パンフレット（ファイルフィールド） --- イベントのチラシのPDFファイルをアップロードしてクリック時に表示

投稿の編集画面では次のように入力したりファイルをアップロードします。

3種類のカスタムフィールドを設定

テキストフィールドの出力

Advanced Custom Fieldsプラグインで作成したカスタムフィールドを画面に表示するにはthe_fieldという命令を使って次のように記述する方法があります。

<?php the_field('カスタムフィールド名'); ?>

「カスタムフィールド名」を実際のカスタムフィールド名に変更します。たとえば、「event_copy」という名のカスタムフィールド「キャッチコピー」の場合は次のようになります。

<?php the_field('event_copy'); ?>

これで、カスタムフィールドの内容が画面に表示されます。

テキストのカスタムフィールドを表示

編集画面で入力したカスタムフィールドと、ブラウザ表示は次のように対応しています。

編集画面に入力したカスタムフィールドとブラウザ表示の対応

上記のthe_fieldという命令はAdvanced Custom Fieldsプラグインで作成したカスタムフィールドを表示するための命令です。Advanced Custom Fieldsプラグインを使わない場合など、他の書き方がいくつかありますが、話が長くなるので説明は省略します。

画像フィールドの出力（画像の表示）

画像のカスタムフィールドもthe_fieldを使って画面に表示することができます。その前に、画像フィールドでURLを表示する設定になっているか確認しましょう。

それには、Advanced Custom Fieldsのカスタムフィールドの編集画面を開きます。

画像フィールドの設定画面を開く

画面を下にスクロールして「返り値」を「画像URL」に設定します。

画像フィールドの返り値を「画像URL」に

設定を変更した場合は、「更新」ボタンをクリックして設定を完了します。

続いて、カスタムフィールドを出力するテンプレートに次のように入力してみましょう。「event_image」は実際のカスタムフィールド名に変更してください。

<?php the_field('event_image'); ?>

これで、画像フィールドの内容（画像のURL）が画面に表示されます。

画面フィールドの内容が表示される

ここでは、画像URLを表示することが目的ではないのでimgタグを使ってレイアウトします。紛らわしいですが、上記のthe_fieldの1行をimgタグのsrc属性の中に入れるイメージです。

<img src="<?php the_field('event_image'); ?>">

これで、画像URLではなく画像が表示されるようになります。

URLではなく画像が表示される

ファイルフィールドの出力（リンクの表示）

ファイルをアップロードするフィールドの場合も上記のテキストフィールドや画像フィールドと同じようにthe_fieldを使うことができます。その前に、画像フィールドと同じように設定を確認しましょう。

Advanced Custom Fieldsのカスタムフィールド設定画面を開きます。

ファイルフィールドの設定画面を開く

画面を下にスクロールしてファイルフィールドの「返り値」を「ファイルURL」に設定します。

ファイルフィールドの「返り値」を「ファイルURL」に

設定を変更した場合は、「更新」ボタンをクリックします。

続いて、カスタムフィールドを出力するテンプレートに次のように入力してみましょう。「event_flyer」は実際のカスタムフィールド名に変更してください。

<?php the_field('event_flyer'); ?>

これで、アップロードしたファイルのURLが表示されます。

アップロードしたファイルのURLが表示される

ファイルのURLを表示することが目的ではないので、クリックしたらファイル（この例ではPDF）が開くようにリンクとしてレイアウトしましょう。

<a href="<?php the_field('event_flyer'); ?>" target="_blank">チラシはこちら</a>

これで、アップロードしたファイルがリンクとして表示され、クリックするとファイルが開くようになります。

アップロードしたファイルへのリンクが表示される

3種類のカスタムフィールドのまとめ

ここまでに使った3種類のカスタムフィールドをまとめておきます。

• テキストフィールド --- the_fieldを使ってそのまま表示
• 画像フィールド --- the_fieldの表示内容をimgタグでレイアウト
• ファイルフィールド --- the_fieldの表示内容をリンクにレイアウト

作成したコードの例は次のようになります。

<p><?php the_field('event_copy'); ?></p>
<p><img src="<?php the_field('event_image'); ?>"></p>
<p><a href="<?php the_field('event_flyer'); ?>" target="_blank">チラシはこちら</a></p>

表示結果は次のようになります。

3種類のカスタムフィールドの表示結果

まとめ

このようにthe_fieldを使うと、Advanced Custom Fieldsプラグインで作ったカスタムフィールドの内容を出力することができます。ただし、画像フィールドやファイルフィールドのようにそのまま出力しても意味がない項目もあるので、用途に応じてHTMLタグを使ってレイアウトを整える必要があります。

この記事ではカスタムフィールドを出力するために最も手軽な方法を紹介しました。他にいくつもの方法があるので、画像フィールドやファイルフィールドは出力がうまくいかないこともあります。また、コードを簡略化するため、あえて必要な処理を省略した部分もあります。

足りない部分の仕上げはWordPress個別サポートで対応いたしますので、よろしければご相談ください。

front-page.phpとhome.phpは、どちらもトップページのテンプレートとして使用可能なファイルですが、両方とも含まれているテーマも少なくありません。では、2つのテンプレートは、いつ、どのようなタイミングで使われるのでしょうか。

front-page.php／home.php／index.phpの関係は？

ここでは、front-page.php、home.php、index.phpがトップページのテンプレートとして使われるタイミングを紹介します。

トップページはfront-page.phpが最優先

使用中のテーマにfront-page.phpが存在する場合は、トップページの表示レイアウトにはfront-page.phpが使われます。

front-page.phpとhome.phpの両方が含まれる場合でも、トップページのテンプレートとしてはfront-page.phpが優先されます。

front-page.phpが存在しない場合

front-page.phpが存在しない場合は、home.php、page.php、index.phpなどが使われます。そのタイミングは「設定」‐「表示設定」メニューの「フロントページの表示」の設定によります。

「フロントページの表示」が「最新の投稿」の場合

「フロントページの表示」が「最新の投稿」の場合はhome.phpが使われます。home.phpが存在しない場合はindex.phpが使われます。

「フロントページの表示」が「最新の投稿」の場合

「フロントページの表示」が「固定ページ」の場合

「フロントページの表示」が「固定ページ」の場合はpage.phpが使われます。

「フロントページの表示」が「固定ページ」の場合

ただし、その固定ページにpage-スラッグ.phpのようなテンプレートが適用されている場合は、そのテンプレートが優先されます。

また、上記の設定では「投稿ページ」（ブログ記事一覧）のテンプレートにhome.php（存在しない場合はindex.php）が使われます。

まとめ

トップページのテンプレートにfront-page.php、home.php、index.phpが使われるタイミングは理解できたでしょうか。基本的にはfront-page.phpですが、すべてのテーマにfront-page.phpが存在するとは限りません。home.phpとindex.phpの優先順位もおさえておきましょう。

リンクには下線が付くのが一般的ですが、リンクの下線を消したり、文字と下線の間に余白を入れたり、下線を点線にしたいこともあります。

下線付のリンク

ここでは、CSSを使って下線をいろいろと設定する方法を紹介します。

リンクの下線を消す

下線を消すにはCSSで「text-decoration: none;」を指定します。

/* リンクの下線を消す */
a {
    text-decoration: none;
}

これで、リンクの下線が消えます。

リンクの下線が消える

マウスオーバー時のみ下線を消す

通常時は下線を表示しておき、マウスオーバー時のみ下線を消すには「:hover」に対して「text-decoration: none;」を指定します。

/* マウスオーバー時のみリンクの下線を消す */
a:hover {
    text-decoration: none;
}

リンクにマウスオーバーしたときのみ、下線が消えます。

マウスオーバー時のみ下線を消す

マウスオーバー時に下線を付ける

上記とは逆に通常のリンクに下線を付けず、マウスオーバー時に下線を付けるには、「:hover」に対して「text-decoration: underline;」を指定します。たとえば、次のようなCSSになります。

/* リンクの下線を消す */
a {
    text-decoration: none;
}

/* マウスオーバー時にリンクの下線を付ける */
a:hover {
    text-decoration: underline;
}

通常時は下線がありませんがマウスオーバーすると下線が付きます。

マウスオーバー時に下線を付ける

リンクの文字と下線に余白を入れる

リンクの文字と下線はピッタリ付いています。

リンクの文字と下線は付いている

文字と下線の間に余白を入れたい場合、通常の下線を消してリンクの枠線を設定し、リンクと枠線の間に余白を入れる方法があります。たとえば、次のようなCSSです。

/* リンクの文字と下線に余白を入れる */
a {
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: solid 2px #060;
}

これで、リンクの文字と下線の間に余白が入ります。

リンクの文字と下線の間に余白

上記のCSSの「padding-bottom」が文字の下余白のサイズです。また、「border-bottom」が下線のスタイル、太さ、色の設定です。自由に変更してみてください。

リンクの下線を点線に

上記のCSSのborder-bottomで指定した枠線のスタイル「solid」を「dotted」に変更すると、リンクの下線が点線になります。

/* リンクを点線に */
a {
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: dotted 2px #060;
}

リンクの下線が点線になります。

リンクの下線を点線に

まとめ

このように「text-decoration」や「border-bottom」などのCSSを使うと、リンクの下線を消したり、マウスオーバー時に付けたり、文字との間に余白を入れることができます。あとはアイデア次第です。いろいろと試してみてください。

TablePressで作るテーブルのセルには画像を入れることができます。これを利用して、画像を横に並べてマルチカラムにレイアウトする方法を紹介します。仕上がりイメージは次のようになります。

TablePressで画像をマルチカラムにレイアウトする

TablePressプラグインはインストール済みという前提で進めます。

TablePressで画像を入れるテーブルを作成

まずは、「TablePress」‐「新しいテーブルを追加」メニューを開きます。

「TablePress」‐「新しいテーブルを追加」メニューを開く

作成するテーブルの名前(1)（例：コース紹介）を入力し、テーブルの行および列の数(2)を選択して「テーブルを追加」ボタン(3)をクリックします。ここでは、行数および列数は「1行・2列」に設定しますが、作成したいテーブルに合わせて自由に選択してください。

作成するテーブルの設定

テーブルのセルに画像を入れる

テーブルの内容を入力するセルが表示されます。その下にある「画像を挿入」ボタンをクリックします。

「画像を挿入」ボタンをクリック

画像の追加方法の説明が表示されるので「OK」ボタンをクリックします。

画像の追加方法の確認

画像を追加するセルをクリックします。

画像を追加するセルをクリック

「メディアの挿入」画面が表示されるので、新しい画像をアップロードするか、アップロード済みの画像をメディアライブラリから選択します。

メディアの挿入

ここから先は投稿や固定ページに画像を追加する手順と同じです。

目的の画像を選択後、「テーブルに挿入」ボタンをクリックします。

画像をテーブルに挿入

画像のタグがセルに追加されます。

セルに画像のタグが追加される

これで、左側のセルには画像が表示されるようになります。同じように他のセルにも画像を追加しましょう。

その他のセルにも画像を追加

テーブルの不要なオプションを無効に

セルの内容が入力できたら、画面を下にスクロールしてテーブルのオプションを設定しましょう。たとえば、以下のオプションは不要なのでチェックをはずします。

• テーブルの最初の行をテーブル見出しにする
• テーブルの最後の行をテーブル フッターにする
• 連続する行の背景色を別々の色にする
• マウス カーソルを行に合わせている間、行の背景色を変更してハイライト表示する

不要なオプションのチェックをはずす

設定できたら「変更を保存」ボタンをクリックして完了です。

「変更を保存」ボタンをクリック

保存すると、このテーブルのショートコードが表示されるので、コピーして任意の固定ページの編集画面にペーストしてみましょう。

テーブルのショートコードをコピー

任意の固定ページの編集画面にペーストします。

テーブルのショートコードをペースト

作成したページを確認すると、マルチカラムのコース紹介が表示されます。

画像を入れたテーブルが表示される

テーブルのデザインを微調整

使用中のテーマによって異なりますが、CSSの微調整が必要な場合もあります。たとえば、テーブルに不要な枠線が付いているなら「border: none;」で消すことができます。テーマによって記述方法が微妙に異なりますが、以下にBizVektorのCSSの例を紹介します。

/* テーブルデザイン調整 */
#content .tablepress-id-4,
#content .tablepress-id-4 td {
    border: none;
    padding: 10px 2px;
}

これでテーブルの枠線が消えて画像に付けた枠線のみが残ります。また、余白も狭くなります。

テーブルの枠線を消す

スマホなどで確認して、違和感がないかチェックしましょう。

スマホでの表示イメージ

ちなみに、2行×2列で作成すると、こんな感じになります。

2行×2列のテーブル例

すべてのページの下にテーブルを表示する

作成したコース紹介などのテーブルを全ページの下に表示したい場合、編集画面に毎回ショートコードを入力するのは面倒です。そんなときは固定ページのテンプレート（page.php）や個別記事のテンプレート（single.php）にショートコードを入力する方法があります。

以下は、single.phpで本文を表示するthe_contentの下あたりにdo_shortcodeという命令を使ってショートコードを入力する例です。

<?php the_content(); ?>
<?php echo do_shortcode('[table id=4 /]'); ?>

これで、すべての記事の下にコース紹介のテーブルが表示されるようになります。編集画面に毎回入力する必要はありません。

すべての記事の下に自動でテーブルが表示される

まとめ

TablePressで作るテーブルに画像を入れてマルチカラムにレイアウトする方法を紹介しました。あとはアイデア次第です。参考にしてください。

CSSを使って画像の上に文字を重ねる方法を紹介します。難しそうですが、ポイントだけおさえれば、普通にdivブロックを作るのと変わりません。参考にしてください。仕上がりイメージは次のようになります。

画像の上に文字を重ねて表示したい

CSSで重ねる画像と文字を準備

まずは、後で重ねる画像と文字を準備します。

<img src="http://…略…/sample.jpg" />

不要な書籍、高く買い取ります。地元密着の書店「ABCブック」

この時点では、単に画像と文字が上から下に表示されるだけです。

画像と文字が上下に表示される

画像と文字を3つのdivタグで囲む

画像と文字をCSSで制御しやすくするため、divで囲んでクラス名を付けておきます。

<div class="image-text">

<div class="image1">
<img src="http://localhost/…略…/sample.jpg" />
</div>

<div class="text1">
不要な書籍、高く買い取ります。地元密着の書店「ABCブック」
</div>

</div>

作成したのは次の3つのdivブロックです。

• 画像ブロック（クラス名：image1）
• 文字ブロック（クラス名：text1）
• 全体のブロック（クラス名：image-text）

急にわかりづらくなったかもしれませんが、画像、文字、そして全体という3つのdivタグで囲んでいるだけです。

画像と文字を囲む3つのdivタグ

この手法は必須ではありませんが、ひとまず簡単に制御できるようにします。

画像を文字を重ねるCSSの作成

これらのdivブロックに対してCSSを記述して画像と文字を重ねます。たとえば、次のようなCSSになります。

/* 全体の枠 */
.image-text {
    position: relative;
}

/* 重ねる文字 */
.text1 {
    position: absolute;
    top: 20px;
    right: 10px;
    width: 50%;
    color: darkred;
    background-color: #fff;
    padding: 15px;
    font-size: 20px;
    line-height: 130%;
}

これにより、単に上から下に表示されていた画像と文字が重なって表示されます。

画像と文字が重なって表示される

コードを見てカスタマイズすれば大丈夫な方は、自由にカスタマイズしてお使いください。

以下、ポイントを紹介します。

ポイントは位置指定できるようにすること

画像と文字を重ねる基本コンセプトは、「画像の左上」や「画像の右下」などの位置を指定できるようにすることです。文字ブロックに対して「画像の」と言っても位置がわからないので工夫が必要です。

いくつかの方法がありますが、画像と文字の周りをもう1つのdivタグで囲むことで、文字を囲む親要素のdivブロックができます。その親要素のdivタグは画像と同じ大きさでもあるので、「文字の親要素の左上」などと指定すれば、「画像の左上」を指定しているのと同じです。

そのためのCSSが次の部分です。親要素のpositionを「relative」子要素を「absolute」にすることで、親要素の画像ブロック上で子要素の位置指定（左上、右下など）が可能になります。

/* 全体の枠（親要素） */
.image-text {
    position: relative;
}

/* 重ねる文字（子要素） */
.text1 {
    position: absolute;
    top: 20px;
    right: 10px;
    width: 50%;
    color: darkred;
    background-color: #fff;
    padding: 15px;
    font-size: 20px;
    line-height: 130%;
}

文字ブロックの位置指定

実際の位置指定はtop（上）、bottom（下）、left（左）、right（右）を使って指定することができます。上記の例では上から20px、右から10pxの位置に文字を表示しています。

あとはいろいろと試していただければ大丈夫ですが、上下左右にピッタリ付けるには、単純に「0」を指定するだけです。たとえば、「top: 0;」「left: 0;」を指定すると文字ブロックは左上に表示されます。

文字ブロックに「top:0;」「left:0;」を指定した場合

文字ブロックの色など

その他のCSSは、divブロックを作るときに使うものです。background-colorやpaddingを設定しておけば、写真と重なったときにも文字を見せることができます。写真を透過させたければ「opacity: 0.8;」のようなCSSを文字ブロックに追加すればよいでしょう。opacityは0から1までの数値を指定できます。0が透明、1が不透明です。

文字から画像を透けさせたイメージ

まとめ

CSSを使って画像と文字を重ねる方法を紹介しました。ポイントは全体をdivタグで囲んで親要素に「position: relative;」、子要素に「position: absolute;」を設定することです。他にも方法があるので、違和感があればいろいろと調べてみてください。

「WordPressをカスタマイズしたい」と思ってもレベルによってアプローチが異なります。基本的な考え方を理解していないと、ちょっとしたカスタマイズなのに「PHPの修正が必要だ！」と間違った方向に意識を向けてしまいます。ここでは、WordPressカスタマイズの考え方を簡単にまとめておきます。

WordPressカスタマイズの基本コンセプト

WordPressでカスタマイズを行う場合、楽をしたければできるだけメニュー操作だけで完結させるのが基本コンセプトです。

どうしてもメニュー操作で対応できないデザイン調整などのカスタマイズはCSSで行い、さらに複雑なカスタマイズはPHPを使うということです。苦労したくなければ、最初からCSSだとかPHPだとか、考えてはいけません。

• まずは、管理画面のメニューを使ってカスタマイズする
• メニューでカスタマイズできなければCSSを使う
• それでも無理ならPHPを使ってカスタマイズする

WordPressのカスタマイズというと、すぐに「PHPを勉強しなきゃ」と発想が飛躍する方がいますが、すべての作業にCSSやPHPが必要なわけでもありません。苦労したくなければ、「できるだけメニュー操作だけでカスタマイズする」という発想で取り組みましょう。以下、それぞれの作業について簡単に説明します。

WordPressカスタマイズに使う定番メニュー

「まずはメニュー操作だけでWordPressをカスタマイズしましょう」といっても、管理画面のメニューは膨大です。その中でも便利な定番メニューを紹介します。

オプションメニューでテーマをカスタマイズできる

WordPressのカスタマイズに役立つ定番のメニューは以下の2つです。

• 「外観」-「カスタマイズ」メニュー
• 「外観」‐「テーマオプション」メニュー

特に「外観」‐「テーマオプション」メニューに注目です。その名の通りテーマをカスタマイズできるオプションメニューのことで、ロゴ画像をアップロードしたり、文字サイズを変更するなど、便利な機能が集約されています。

テーマオプションメニューの例（BizVektor）

テーマオプションはテーマに依存するので注意

便利なテーマオプションメニューですが、これは使用中のテーマに依存するメニューだということに注意が必要です。つまり、テーマによって内容が異なります。そもそも、シンプルなテーマには「外観」-「テーマオプション」メニューが存在しません。

また、テーマを変えてしまうと、オプションメニューの構成がガラッと変わってしまい、ロゴ画像アップロードや文字サイズ変更メニューがなくなってしまう場合があります。

逆に、シンプルなテーマから実用的なテーマに切り替えた場合、同じWordPressなのかとビックリするほど充実した「テーマオプション」メニューが使用可能になる場合があります。たとえば、BizVektorのテーマオプションは非常に充実しています。詳しくは、以下のページも参考にしてください。

• WordPressでホームページを作る手順

サイトのロゴ画像をアップロードしたり、画面右上に会社の電話番号を掲載したり、スライドショーを設定するなど、メニュー操作だけで便利なパーツをサイトに追加できるようになります。

シンプルなテーマにはテーマオプションがない

「何が実用的なの？」がピンとこない場合は、Twentyシリーズなどのシンプルなテーマに切り替えてみてください。「外観」-「テーマオプション」メニューは存在しません。その状態からスライドショーを表示したり、会社の連絡先を表示するには、どうすれば良いでしょうか？場合によっては自力でHTMLやCSSの修正が必要だったり、PHPの編集が必要になるかもしれませんね。

自力でHTMLやCSSを打ち込むのを考えると頭が痛くなるかもしれませんが、その手間を省いてくれるのが「テーマオプション」メニューです。

「WordPressって意外と使いづらいですよね」とか「PHPの知識がないとカスタマイズできない」と思っている方は、選んだテーマがシンプル過ぎるのかもしれません。BizVektorのような実用的なテーマを選ぶとサイト制作が簡単になり、カスタマイズが楽しくなりますよ。

カスタマイズで苦労したくない方、特にHTMLやCSSなどの知識がない方は、新しいテーマを選んだときに「テーマオプション」のような便利なメニューが使えるかどうか、調べておくと良いでしょう。

私のWordPress講座でも「テーマ選びは色だけの問題ではない」と説明していますが、そのような意味です。オプションメニューで簡単にカスタマイズできるようになっていた方が便利ですよね、ということです。

「外観」‐「テーマオプション」メニューだけでなく「外観」-「カスタマイズ」メニューも同じです。テーマによっては、さまざまなメニューが集約されている場合があります。

まとめると、カスタマイズで苦労したくなければ、まずは、「外観」のサブメニュー、特に「テーマオプション」メニューや「カスタマイズ」メニューを探ってみることです。

慣れてきたら「プラグイン探し」に徹する

テーマオプションに依存しすぎるのは問題かも

テーマのオプションメニューが便利とはいえ、その機能には限界があります。実用的なテーマのオプションメニューですべてのカスタマイズ要件を解決できるとは限りません。使用中のテーマがスライドショーなどのパーツに対応していないこともあるでしょう。

そのような場合、テーマオプションだけのために別のテーマに取り替えるのも不都合かもしれません。とはいえ、「さあPHPを勉強するぞ」と飛躍する必要もありません。

テーマオプションがなくても大丈夫

テーマオプションがない場合でも「メニュー操作でカスタマイズする」というスタンスで大丈夫です。それには、「プラグイン探し」に徹することです。カスタマイズ要件に合うプラグインを探しまくって、そのプラグインの設定メニューを使ってカスタマイズするということです。

WordPressのプラグインは説明しきれないくらい充実しており、世界初の要件でもない限り、要望を満たすプラグインが必ず見つかると言っても良いほどです。WordPressの定番プラグインについては以下のページも参考にしてください。

• WordPressプラグイン60本まとめ

WordPressで困ったときに「WordPress　スライドショー　プラグイン」のようなキーワードで検索すれば、さまざまなプラグインをおすすめするブログ記事が見つかります。その中で良さそうなプラグインをインストールして活用していけば、カスタマイズに関する困りごとに対応できるということです。

「困ったときはプラグイン探し」です。

さらに慣れてきたら「CSSカスタマイズ」

プラグイン探しに徹すると、「このような機能を追加したい」の要件は満たすことができますが、問題はデザインの仕上げです。思ったようなデザインに仕上がらないことがあります。

その原因は、要件のハードルが高すぎるというより、プラグインとテーマの相性の問題かもしれません。たとえば、会社概要を表で追加するためにTablePressプラグインでテーブルを追加するのは定番のカスタマイズですが、表示結果はテーマによって異なります。

テーマがBizVektorの場合は次のように見えます。

BizVektorにTablePressで作った表を入れたイメージ

賢威7の場合は次のようになります。

賢威7にTablePressで作った表を入れたイメージ

STINGER PLUS+の場合は次のようになります。

STINGER PLUS+にTablePressで作った表を入れたイメージ

Twenty Twelveの場合は次のようになります。

Twenty TwelveにTablePressで作った表を入れたイメージ

どうでしょうか。このように、「会社概要を表で作りたい」はTablePressプラグインで解決できますが、「表のセルは枠線で囲まれているはず」という暗黙の要件の対応状況はテーマによって異なり、意図したデザインに仕上がらない場合もあります。

この場合、「テーマとプラグインの相性の問題」だとピンとくれば大丈夫ですが、だからといってテーマを変えるのがベストとは限りません。

こんなときはテーマのCSSとプラグインのCSSの優先関係の問題で、今ひとつなデザインになってしまうと考えればよいでしょう。つまり、CSSをカスタマイズすれば、こうしたデザインの違和感は解消できます。

たとえば、STINGER PLUS+に次のようなCSSを追加します。

.post table,
.post table td {
    border: 1px #999 solid;
}

テーブル全体に枠線が表示され、デザインの違和感が解消します。枠線以外のデザインの違和感もCSSを修正していけば解決できるはずです。

テーブル全体に枠線を付ける

ここでは、「テーブルの枠線を付けるには？」のような具体的な解決策よりも、次のような考え方を理解することが重要です。

• プラグインで追加したパーツのデザインに違和感があるのはテーマとの相性の問題
• 「相性の問題」とは、それぞれのCSSの優先順位の問題
• プラグインのCSSの優先順位が低い場合はスタイルが反映されない
• その場合はテーマのCSSより優先順位の高いスタイルを追加すればよい
• 多くの「テーマとプラグインの相性問題」はCSSカスタマイズで解消できる

ということは、CSSを入力することができれば、テーマとプラグインの相性問題のような課題も自力で解決できるようになります。もちろん、すべてのテーマとプラグインに相性問題があるわけではありませんが、WordPressでCSSカスタマイズするための基礎を身につけておけば、どこかで役立つことは間違いありません。

WordPressのCSSカスタマイズに役立つ本

CSSカスタマイズというと難しそうですが、最初からすべてのCSSを覚える必要もなく、実際に自分のサイトで修正したい部分を直しながら小さい自信を付けて行く学習法が現実的です。その場合、「インスペクタ」というツールが役立ちます。

ブラウザ上でCSSの変更シミュレーションができるので、CSSの記述経験がなくても変更後のイメージを確認しながら、CSSをカスタマイズすることができます。

詳しくは、以下のページで説明しているので参考にしてください。Amazon読み放題対応の電子書籍で読むこともできます。

【CSSカスタマイズを身につけたければ必修】BizVektorのCSSの直し方

最後のチャレンジは「PHPカスタマイズ」

CSSでカスタマイズできない部分、特にページの構造を抜本的に変更するような場合は、PHPのカスタマイズが必要です。「CSSもPHPも数行程度のコード、難しさは一緒でしょ」と思ってはいけません。CSSは多少間違っても大問題は起きませんが、PHPを1文字間違えると画面が真っ白になる場合があります。

• WordPressで画面が真っ白になる原因ベスト3
• WordPressで画面が真っ白になったら「Fatal error」を探せ！
• functions.phpの変更後にエラーで画面が真っ白になったとき

CSSカスタマイズとPHPカスタマイズの違い

CSSとPHPの違いを「英語学習」にたとえて表現すれば、CSSは簡単に英会話したいレベル、PHPは英語の文章を書きたいレベルです。どちらも英語を学ぶことに変わりませんが、英単語を1つずつ覚えて楽しく会話できるイメージがCSSです。

PHPは「英単語を覚えて楽しく学習」のレベルでは済みません。構文の理解が必要です。たとえば、「if」「while」「function」のような構文は、意味がわかるだけではダメです。実際に構文を使って数行から数十行のコードを作成できるようにならなければ、怖くて実戦デビューできません。

とはいえ、PHPカスタマイズのレベルもさまざまです。

• テンプレートのちょっとした編集
• テンプレートのカスタマイズ
• オリジナルテーマの作成
• オリジナルプラグインの開発

PHPの入門書は全部マスターする必要はない

PHPの入門書が300ページあるとすれば、ちょっとしたテンプレートの編集やカスタマイズができれば良いレベルであれば、前半の100ページくらいの「基本構文」のような章の内容を理解できれば十分です。

それに対して、オリジナルテーマの作成やオリジナルプラグインの開発までマスターしたい場合はPHPの入門書だけでは足りません。「オブジェクト指向」に関するスキルもマスターする必要があります。これにはシステム設計のスキルも含まれ、相当の年月を覚悟する必要があります。

オリジナルテーマの作成には幅広い知識が必要

ただし、微妙なのが「オリジナルテーマの作成」です。このレベルをクリアしたい場合は、PHP入門書の「基本構文」「データベース処理」をマスターするのに加えて、「WordPressのPHP」についても熟知する必要があります。

WordPressのPHPは、いわゆる一般的な「PHP入門」とは切り口が異なるので、別の書籍が必要になるでしょう。「WordPressの教科書」はテーマ作成の書籍としては便利ですが、あくまで手順解説が中心なので、その基盤技術の仕組みを理解するために、他の書籍も合わせて知識をふくらませる必要があります。

• テーマ（テンプレート）の構成
• テンプレートの優先順位
• 基本的なWordPress関数の使い方
• PHPファイルの編集方法
• PHPの基本構文の使い方
• WordPressデータベースの仕組み
• データベース処理の記述方法

もちろん、これらの項目を熟知していなくてもオリジナルテーマの作成は可能ですが、理想を言えば、ということです。

自力でのカスタマイズに限界を感じたら「業者に依頼する」

スキルを身につけてCSSやPHPをカスタマイズするには、数年の経験が必要です。どうしても自力でこなせない場合は業者に依頼して修正してもらうことになるでしょう。

宣伝で恐縮ですが私が運営する「西沢直木のIT講座」でもWordPress個別サポートを提供しており、「ここを直したい！」とか「自分で修正してみたけど、うまくいかない！」という要望やお悩みに対応しています。

悩んでいると時間ばかりが過ぎていきます。泣きながらスキルを身につけたい方はそれでも構わないのですが、解決できない問題は聞いてしまった方が早く解決できる場合がほとんどです。

また、すべて独学で進めていると、間違った方向や、効率の悪い手法で取り組んでしまっているかもしれません。

WordPressのカスタマイズがうまくいかない場合は、気軽にご相談ください。

WordPress個別サポートについて詳しくはこちら

一覧ページでタイトルをクリックしたときに記事を開かず別のページや外部サイトに飛ばしたいこともあります。たとえば、会社のサイトとショッピングサイトを別のドメインで作成した場合です。「商品一覧」のタイトルがクリックされたら、別のドメインに作ったショッピングサイトの販売ページに移動してもらいたいかもしれません。

商品一覧をクリックしたら外部の販売ページを表示したい

仕組みとしては記事からショッピングサイトにリダイレクトすることになりますが、その場合、VK Link Target Controllerプラグインが役立ちます。

記事タイトルのクリック時に別サイトに飛ばす設定

「プラグイン」‐「新規追加」メニューからVK Link Target Controllerプラグインをインストール、有効化します。

VK Link Target Controllerプラグインのインストール

「設定」‐「Link Target Controller」メニューを開いて、対象にする投稿タイプをチェックします。

他のサイトに飛ばす投稿タイプをチェック

別サイトに飛ばす記事やページの編集画面を開いて、「リダイレクト用URL」にURLを入力します。URLを空にすれば転送は無効になります。

転送先のURLを入力

記事一覧ページを開いて、タイトルをクリックすると、指定URLにリダイレクトされます。

商品一覧をクリックすると外部の販売ページが表示される

あとは、個々の記事と外部ショッピングサイトの販売ページなど、移転元と移転先を関連付けていくだけです。

WordPressで使っているプラグインやウィジェットによっては記事IDやカテゴリーIDを入力する場面があります。ここでは、記事ID・ページID・カテゴリーIDを調べる方法を紹介します。

記事IDやカテゴリーIDの入力が必要なことも

WordPressで記事IDを調べる

WordPressで記事ID（投稿のID）を調べるには、その記事の編集画面を開きます。

記事の編集画面を開く

ブラウザのアドレスバーを見て「post=99999」の部分を見つけます。この「99999」の数字が記事IDです。

「post=99999」の数字が記事ID

固定ページのページIDを調べる

記事IDは投稿だけでなく固定ページでも使われています。つまり、記事IDとは固定ページのページIDでもあります。調べたい固定ページの編集を開いて、上記と同じように「post=99999」の数字を見つけます。この数字が固定ページの記事ID（ページID）です。

固定ページのページIDも同じように調べる

カスタム投稿タイプの記事ID

カスタム投稿タイプの記事IDも同じです。プラグインによってはカスタム投稿の記事IDを入力する場面もありますが、同じように調べましょう。

たとえば、予約プラグインのMTS Simple Booking Cでは予約カレンダーを表示するために「ID」の入力が必要です。予約品目の編集画面を開いてアドレスバーから「post=99999」の数字を見つけましょう。

カテゴリーIDを調べる

カテゴリーIDを調べるには「投稿」‐「カテゴリー」メニューから、IDを調べたいカテゴリーの編集画面を開きます。アドレスバーのURLのうち「tag_ID=99999」の数字がカテゴリーIDです。

カテゴリーIDを調べる

記事IDを取得・表示する命令

テンプレートの中で記事IDを取得して使いたい場合はthe_IDやget_the_IDという命令を使います。the_ID関数は記事IDを画面に表示、get_the_ID関数は記事IDを変数に返します。参考にしてください。

WordPressで作成した記事のID（投稿ID）や固定ページのIDは連番にならないことが多いです。123番の記事の次の記事は150番だったりします。番号が飛んで気持ち悪く思うかもしれませんが、その理由を簡単に説明します。

WordPressの記事IDは投稿と固定ページで共有されている

まず、WordPressの基本的な仕組みですが、投稿や固定ページなど、管理画面から入力した内容はデータベースに保存されます。

管理画面から入力した内容はデータベースに保存される

データベースにはデータを保存する箱（テーブル）がいくつも存在しますが、投稿と固定ページは同じテーブル（wp_postsテーブル）に保存されます。次のようなイメージです。

投稿と固定ページは同じテーブルに保存される

テーブルのデータには行を識別するIDが付いています。上記の例では373～375までの番号になっています。ここで重要なのは、投稿と固定ページでIDを共有していることです。そのため、投稿のIDは連番になりません。

管理画面では次のように続いている投稿でもIDが連番にならないのは、そのためです。

続けて書いた投稿のIDは連番とは限らない

記事IDはメディアやカスタムメニューでも共有されている

IDを共有しているのは投稿と固定ページだけではありません。メディアライブラリやカスタムメニューなどでも共有されています。

WordPressのデータベースを参照できるなら、wp_postsテーブルのpost_typeフィールドを見るとわかります。さまざまな種類のデータでIDが共有されていることがわかります。

記事IDは幅広いデータで共有されている

記事が100件しかないのにIDが999などになってしまうのは、このためです。ですから、「記事IDを連番にしたい」などとは考えない方が良いですね。

カテゴリーIDはwp_termsに

ちなみに、カテゴリーIDはwp_termsテーブルを見るとわかります。term_idフィールドがカテゴリーIDです。このデータから「投稿」‐「カテゴリー」メニューが作られています。

カテゴリーIDはwp_termsテーブルに

WordPressテーマの構成ファイルについて簡単に説明します。定番の構成ファイルを理解してカスタマイズに迷わないようにしましょう。

WordPressテーマの基本構成

テーマの構成ファイルは1つのフォルダに保存される

WordPressテーマは1テーマ1フォルダの形式で、wp-content/themesフォルダに格納されています。たとえば、BizVektorというテーマの構成ファイルはbiz-vektorというフォルダに保存されています。

テーマの構成ファイルは1テーマ1フォルダで保存されている

どのテーマも1テーマ1フォルダの形式で保存されています。子テーマも同じです。たとえば、上記のbiz-vektor-childというフォルダにはBizVektorの子テーマが格納されています。親テーマのbiz-vektorフォルダとは別フォルダです。

テーマを格納するフォルダ名は自由ですが、他のテーマと同じ名前のフォルダは使えません。

主な構成ファイルは3種類

テーマのフォルダには数十ものファイルが含まれています。Twentyシリーズの例では、40～70ファイルくらいです。膨大なファイルが存在しますが、主に次の3種類（＋その他）に分類できます。

• レイアウトを決めるテンプレート --- header.php、single.php、page.phpなど
• デザインを決めるCSSファイル --- style.cssなど
• 機能を決めるfunctions.php
• その他（画像・JSファイルなど）

これからWordPressテーマのカスタマイズにチャレンジする場合は、特に上記の3種類（テンプレート・style.css・functions.php）の役割を理解する必要があります。以下、それぞれのファイルについて説明します。

レイアウトを決めるテンプレート

テンプレートの役割は表示中のページのレイアウト（HTML）を決めることです。拡張子が「php」のPHPファイルとして作成されており、次の2種類に分類できます。

• ページ別のテンプレート --- トップページ、個別記事、固定ページなど
• パーツ別のテンプレート --- ヘッダー、フッター、サイドバーなど

ページ別のテンプレート

ページ別のテンプレートは、WordPressで表示中のページの種類に応じて使われます。定番のテンプレートは次のようになります。

• トップページ --- front-page.php／home.php／index.php
• 固定ページ --- page.php
• 記事の一覧（アーカイブ） --- archive.php
• 記事の詳細（個別記事） --- single.php

たとえば、固定ページが表示されている場合、page.phpのレイアウトが適用されます。つまり、単純に考えれば、page.phpをカスタマイズすれば固定ページのレイアウトを修正することができます。

パーツ別のテンプレート

上記の各ページは次のようなパーツで構成されます。

• ヘッダー
• フッター
• サイドバー

それぞれのパーツもテンプレートを使ってレイアウトを決めることができます。定番のテンプレートは次のとおりです。

• ヘッダー --- header.php
• フッター --- footer.php
• サイドバー --- sidebar.php

表示中のページと使われるテンプレートのイメージは次のようになります。

表示中のページと使われるテンプレート

これらのテンプレートはページ別のテンプレートとは異なり、単独で使われるわけではありません。表示中のページのテンプレート内で呼び出されるイメージです。

たとえば、Twenty Sixteenで個別記事を表示するテンプレート「single.php」を抜粋すると、次のようになっています。

<?php get_header(); ?>

<div id="primary" class="content-area">
…記事のタイトルや本文を表示（略）…
</div><!-- .content-area -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

強調表示したget_header、get_sidebar、get_footerという命令を呼び出すことで、それぞれ、header.php、sidebar.php、footer.phpが読み込まれる仕組みです。

• get_header関数 --- header.phpを読み込む
• get_sidebar関数 --- sidebar.phpを読み込む
• get_footer関数 --- footer.phpを読み込む

「カスタマイズ＝テンプレート修正」とは限らない

上記のように、ページやパーツによって使われるテンプレートが決まっているので、何らかのカスタマイズをしたい場合、該当するテンプレートを開いて直せば良さそうです。たとえば、ヘッダーをカスタマイズしたければheader.phpを修正したり、コンテンツ（記事のタイトルや本文）の周辺をカスタマイズしたければpage.phpやsingle.phpを修正することを思い付きます。

もちろん、その方法でも間違いではありませんが、場合によっては子テーマのファイル数が膨大になってきて、「親テーマをアップデートしたときに全てエラーなしで反映される？」が不安になるかもしれません。

その場合、テンプレートを修正せずにヘッダーやコンテンツ部分をカスタマイズする方法もあります。「フィルターフック」や「アクションフック」という仕組みを使ってfunctions.phpにカスタマイズ内容を記述する方法です。これならテンプレートを親テーマから子テーマにコピーして修正する場面が減るのでメンテナンスも楽です。

話が長くなるので具体的な説明は省略しますが、テンプレートを修正せずにカスタマイズしたい場合は、WordPressの「フィルターフック」や「アクションフック」について調べてみてください。

ただし、テンプレートを直接編集するカスタマイズ手法も間違いではありません。少しずつコードを修正して自信を付けられるので、テーマのカスタマイズにチャレンジし始めたばかりのときは、その方が安全です。

コンテンツパーツを表示するcontent.php

ここまでページ別のテンプレートやパーツ別のテンプレートについて定番ファイルを紹介してきましたが、もう1つ「content.php」を紹介しておきます。投稿や固定ページのコンテンツパーツ（タイトルや本文など）を表示するテンプレートです。

Twentyシリーズのテーマに含まれるsingle.phpやpage.phpを開いてみると、投稿や固定ページのタイトルや本文を表示する命令が書かれていません。これは、コンテンツ部分（タイトルや本文など）を別ファイルに切り離して、single.phpやpage.phpで読み込んでいるためです。

Twentyシリーズのフォルダには「content-？？？.php」というPHPファイルが存在します。

コンテンツ（タイトルや本文など）のテンプレート（Twenty Fifteen）

これらのファイルにページのタイトルや本文などコンテンツ部分のレイアウトを作成しておき、single.phpやpage.phpで読み込む仕組みです。たとえば、Twenty Fifteenのsingle.phpの24行目あたりには次のように記述されています。

get_template_part( 'content', get_post_format() );

このget_template_partという命令により、content.phpが読み込まれます。

page.phpには次のように記述されています。

get_template_part( 'content', 'page' );

これにより、content-page.phpが読み込まれます。

このようにページのコンテンツ部分をcontent.phpなどに切り離してsingle.phpやpage.phpで読み込むテーマも多いですが、single.phpやpage.phpの中にレイアウトを直接記述しているテーマもあります。どちらが正解、というわけではないので、柔軟に対応しましょう。

ファイル構成が違う理由は「テンプレートの優先順位」

上記はあくまで定番の構成例なので、きっちり考えないことが重要です。というのは、上記のような構成でなくてもテーマを作成できるからです。つまり、テーマによって構成ファイルは異なる場合があります。

たとえば、トップページの定番テンプレートにはfront-page.php、home.php、index.phpの3種類もあります。すべてのテーマに3つのファイルがすべて含まれるわけではありません。その理由について詳しくは、以下のページをご覧ください。

front-page.phpとhome.phpとindex.phpの関係

「トップページのテンプレート＝front-page.php」だと思い込んでいると、「このテーマ、front-page.phpがない！」で焦ってしまいます。ファイル構成はテーマによって違うことを理解しましょう。

定番のテンプレートが存在しなかったり、構成ファイルが極端に少ないテーマが存在する理由はテンプレートの優先順位です。

テンプレートには優先順位があり、あるテンプレートが存在しない場合は次に優先順位の高いテンプレートが適用されます。たとえば、アーカイブのテンプレートの優先順位を簡単に紹介します。

• まずは、category.phpが使われる
• category.phpがなければarchive.phpが使われる
• archive.phpがなければindex.phpが使われる

このように、定番のテンプレートが存在しなくても他のファイルで代用できるので、テーマによってテンプレートファイルの構成が異なっているのです。パッと見て違和感があるのはそのためです。

最終的にindex.phpが他のすべてのテンプレートを代用できるので、テンプレートはindex.phpだけあればテーマとしては成り立ちます。実用的かどうかはわかりませんが。

テンプレートの優先順位について詳しくは以下のページも参考にしてください。

http://wpdocs.osdn.jp/テンプレート階層

テンプレートのまとめ

テンプレートについてまとめます。まずは、表示中のページに応じて個別記事のsingle.phpや固定ページのpage.phpなどページ別のテンプレートが使われます。そのテンプレートの中でheader.php、sidebar.php、footer.phpなどのパーツ別のテンプレートが読み込まれます。

予備知識なしでテーマフォルダを開くと膨大なPHPファイルが存在してビックリするかもしれませんが混乱しないようにしましょう。定番のテンプレートをまとめておきます。

• トップページ --- front-page.php／home.php／index.php
• 固定ページ --- page.php
• 記事の一覧（アーカイブ） --- archive.php
• 記事の詳細（個別記事） --- single.php

• ヘッダー --- header.php
• フッター --- footer.php
• サイドバー --- sidebar.php
• コンテンツ --- content.php／content-page.phpなど

スタイルを決めるCSSファイル

上記のテンプレートのスタイルを決めるのはCSSファイル（例：style.css）です。スタイルとは、画面上の文字の色やサイズ・行間などです。

• 文字の色・サイズ・行間
• 段落やブロック間の余白・幅／高さ
• 画像のサイズ・枠線

これらのスタイルがCSSファイルに記述されています。定番ファイルはstyle.cssです。

用途別にCSSファイルを分割

使用中のテーマによってはstyle.cssの他にもCSSが記述されているファイルがあります。定番の用途はPC用とスマホ用のCSSを別ファイルに記述することです。

たとえば、賢威7では次のようなCSSファイルが存在します。

• base.css
• rwd.css
• keni_admin.css
• colpick.css
• style.css

基本的なCSSがbase.cssに、レスポンシブ対応のCSSがrwd.cssに記述されています。style.cssを調べても目的のスタイルが見つからない場合、他にもCSSファイルが存在しないかチェックしてみましょう。

style.cssに何にも書いてない理由

PC用とスマホ用など、用途別にCSSファイルを分割した場合、定番ファイルのstyle.cssに書くことがなくなってしまう場合があります。そのような理由で、いくつかのテーマではstyle.cssを開いても何もCSSが書かれていない場合があります。

実際、賢威7では必要なスタイルがbase.cssやrwd.cssに記述されているため、style.cssにはCSSが書かれていません。

賢威7のstyle.cssにはCSSが書かれていない

CSSを書かなくてもstyle.cssは必須

CSSを全く記述しなくてもstyle.cssはテーマにとって必須ファイルです。それは、style.cssの先頭にテーマ名などを書く必要があるからです。CSSが何も書いていないstyle.cssが存在するのは、このような理由もあります。CSSを書かなくてもテーマにstyle.cssは残しておく必要があるのです。

読み込まれていないstyle.css

style.cssにスタイルが何も書かれていない場合、ページのheadタグ（<link rel='stylesheet' … href='http://…style.css'>）で読み込む必要がないかもしれません。そんなわけでstyle.cssが読み込まれていないテーマがあります。そのようなテーマでは、「style.cssに記述したCSSが反映されない」という現象が起きる場合がありますがトラブルや不具合ではありません。カスタマイズには工夫が必要だということです。

使用中のテーマでstyle.cssが読み込まれているか調べるには、表示中のページでHTMLソースを表示して「style.css」という文字を検索してみてください。たとえば、賢威7でHTMLソースを見ると、style.cssが見つかりません。その代わりにbase.cssやrwd.cssが読み込まれているためです。

style.cssが読み込まれないテーマもある

style.cssを読み込むかどうかはテーマによって異なりますが、重要なのは「style.cssに入力したCSSが反映されない場合がある」と理解することです。その場合、デザインをカスタマイズするにはSimple Custom CSSプラグインやJetpackプラグインをインストールするなどの工夫が必要です。

PHPファイルからCSSを出力する「動的CSS」

style.cssに何も書かれていないもう1つの理由は「動的CSS」かもしれません。

「動的CSS」とは、テーマ制作者が作成したスタイルをファイルに保存するのではなく、テーマ使用者が選んだスタイルを「動的に」CSSに反映する仕組みです。たとえば、BizVektorでは、サイト全体に反映させる色を選ぶことができます。

選択内容をCSSに反映したい

選択内容はテーマ使用者によって異なるため、テーマ制作者が「background-color:red;」のようなスタイルを記述して「静的な」ファイルに保存しておくわけにはいきません。

ユーザーによって選ばれる色はさまざまです。メニューで選択された色をCSSに反映させる仕組みが必要になります。その場合、プログラムを使って「background-color:red;」の「red」の部分にユーザーが選択した色を埋め込むようにする方法があります。

つまり、次のようなイメージです。

background-color: ＜ユーザーが選択した色を入れる＞;

＜ユーザーが選択した色を入れる＞の部分にはプログラムコードが入るため、CSSファイルではなくPHPファイルに保存して、「background-color:red;」のようなCSSを「動的」に組み立てる必要があります。

実際にBizVektorでは、biz-vektor/design_skins/001/001_custom.phpなどのファイルに動的CSSを組み立てるコードが書かれています。

BizVektorの静的／動的CSSファイルの構成

たとえば、001_custom.phpの210行目あたりには次のように書かれています。

#topMainBnr {
background-color:<?php echo $default_design_options['theme_plusKeyColor'] ?>;
}

難しく見えるかもしれませんが、「background-color:red;」の「red」の部分がプログラムになっているだけです。ユーザーが選択した色をCSSに反映しましょう、という仕組みになっています。

ユーザーが選択した内容をCSSに反映するようなテーマを作成したい場合、こうしたテーマの「動的CSS」を組み立てるロジックが参考になるでしょう。

jQueryによる動的CSS

上記の動的CSSはPHPがスタイルを動的に出力する仕組みでしたが、動的CSSにはもう1つのパターンがあります。jQueryを使って動的にクラス名やCSSを制御する方法です。

たとえば、開閉式のスマホメニューが定番です。スマホ画面の右上にある3本線メニューをクリックしたときにグローバルメニューが開いたり閉じたりします。そのためのスタイルはCSSファイルに書いてありますが、そのスタイルを適用するにはクラス名を「動的に」切り替えるなどの対応が必要です。

スマホメニューの開閉は「動的CSS」で制御される

Twenty Fifteenの例で簡単に仕組みを説明します。まず、以下は3本線メニューをクリックする前の状態です。グローバルメニューのクラス名は「secondary」ですが、CSSで「display: none;」が設定されているため非表示になっています。

3本線メニュークリック前の状態

3本線メニューをクリックすると、jQueryによってグローバルメニューのクラス名に「toggled-on」が動的に付加されます。クラス名は「.secondary.toggled-on」となり、そのクラスに設定されたCSS「display: block;」によってメニューが表示されるようになります。

メニュークリック後の状態

Twenty Fifteenのstyle.cssには次のように記述されています。

.secondary.toggled-on {
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	display: block;
}

このtoggled-onクラスを付けたり消したりする記述がstyle.cssに存在しないので混乱するかもしれませんが、jQuery（Twenty Fifteenの例ではjs/functions.js）によってクラス名が動的に切り替えられているということです。

動的CSSのまとめ

動的CSSについてまとめておきます。WordPressテーマの構成ファイルの中で、デザイン（スタイル）を担当するのは基本的にはstyle.cssなどの「静的な」CSSファイルです。「静的」とは内容が固定ということです。

静的CSSだけでは実現できない複雑なデザインに対応するため、PHPファイルやjQueryを使って「動的に」CSSを組み込むこともできます。「動的」の意味は、ユーザーによるメニュー選択や、ボタンクリックなどに応じてデザインを動的に切り替えるということです。

たとえば、スマホ画面の開閉式メニューや、管理画面の「色選択」などが定番の活用例です。

プログラミングに慣れていない方はPHPやjQueryを深追いする必要はありませんが、重要なことは、すべてのスタイル（CSS）がstyle.cssなどのCSSファイルに書かれているわけではない、と理解することです。

デザインをカスタマイズしようと思ってすべてのCSSファイルを片っ端から分析しても目的のコードが出てこないのは、そのためかもしれません。

「デザインカスタマイズ＝CSSファイルの修正」ではない

CSSの構成や影響を受けるファイルがわかったところで、早とちりに注意です。CSSを使ってデザインをカスタマイズするにはテーマのCSSファイルを開いて修正する必要があると思っていないでしょうか。

もちろん、その方法でも間違いではありませんが、テーマのCSSファイルを1つずつ開いて分析と修正を繰り返すのは非効率です。見つけたスタイルが現在の画面に適用されているとは限らないからです。

現在の画面に対してはテーマのCSSだけでなく、プラグインのCSSファイルもスタイルを適用しようとしています。また、多くのテーマがレスポンシブ対応なので、同じパーツに対して端末幅に応じて複数のスタイルが記述されている場合があります。

ですから、テーマのCSSファイルの構成を理解することと、デザインをカスタマイズすることは切り分けて考える必要があります。話が長くなるのでデザインのカスタマイズ方法は説明しませんが、数千行のCSSファイルを分析するのではなく、現在のパーツに適用されているスタイルを知ることが重要です。その最優先されたスタイルを上書きするという手順でカスタマイズするのが効率的です。

CSSを使ったデザインのカスタマイズについて詳しくは、以下のページも参考にしてください。

BizVektorのCSSの直し方

CSSファイルのまとめ

このように、サイトのデザインを決めるためCSSファイルにスタイルが記述されています。定番はstyle.cssですが、用途によってファイルが分割（例：base.css／responsive.cssなど）されている場合があります。また、「動的CSS」を使ってユーザーの選択内容をCSSに反映するため、CSSファイルではなくPHPファイルやjQueryを使ってCSSが制御されている場合があります。高等テクニックですが、デザインカスタマイズのためには、これらのファイルも意識する必要があります。ただし、「デザインカスタマイズ＝CSSファイルの修正」ではないので注意が必要です。

機能を決めるfunctions.php

ここまでに紹介した2種類のファイル「テンプレート」と「CSSファイル」はサイトのHTML構造とデザインを決めるものです。Dreamweaverなどのツールを使った作業では、この2つの要素だけでサイトを制作できますが、WordPressでは少し違います。第3の要素「機能」にも注意が必要です。そのWordPressの機能を決めるのがfunctions.phpです。

「functions.phpが機能を決める」とは

「機能を決める」とは、テーマによってサイトの機能の一部が決まるということです。たとえば、WordPress管理画面の「外観」メニューには多くのサブメニューが存在していて「WordPressは使いやすい」と思うかもしれません。以下はTwenty Twelveの例です。

「外観」のサブメニューは便利

これは、「WordPressが使いやすい」というより「テーマが使いやすい」という方が正しいです。というのは、これらの機能はテーマのfunctions.phpに記述してあるからです。つまり、基本的には「外観」のサブメニューはテーマの制作者が作り込む必要があります。実際、functions.phpなどに次のようなコードが記述されています。

add_theme_support( 'custom-background', … );

add_theme_support( 'custom-header', … );

register_nav_menu(…略…);

register_sidebar(…略…)

試しにこれらのコードを削除すると、「外観」のサブメニューが一気に減ってしまいます。

寂しくなった「外観」のサブメニュ」

もしも、サイト制作を業者に発注して、このようなサイトが納品されたら、こんなことを思うでしょう。

• WordPressって使いづらい！
• 更新が簡単ってのは、ウソ？
• 入門書で見たメニュー構成と違う！

こうした違和感の原因はWordPress自体が使いづらいのではなくテーマのせいです。テーマの機能を決めるfunctions.phpなどに上記のような「カスタムメニューを使えますよ」とか「こんなウィジェットが使えますよ」のコードを記述していないため、非常に使いづらい管理画面になっているのです。

格安・短納期の裏事情は「functions.phpの省略？」

「外観」のサブメニューがスカスカになっているというのは物語ではなく、実際によく聞く話です。WordPress個別サポートにも相談をいただきます。WordPressで作ってもらえば納品後も更新が簡単だと思って発注したら、納品後に上記のサブメニューが寂しいサイトが納品されたとか、自分のサイトのメニュー構成がWordPress入門書で見る管理画面とは違う、そんなことを聞いたのは一度や二度ではありません。

管理画面で使える機能を充実させるのはWordPress本体の基本機能ではなく、テーマの制作者によるところが大きいということです。特にカスタムメニュー、カスタムヘッダー、ウィジェットなど、サイトの更新に関係する機能は、テーマの制作者がfunctions.phpに組み込む必要があります。

格安、短納期で制作されるWordPressサイトに関しては、こうした時間がかかる機能の組み込みが省略されている場合があります。

サイトを発注する側ではなく逆に、サイトを納品したり、自作テーマを作る場合も同じです。カスタムメニュー、カスタムヘッダー、ウィジェットなどはテーマの制作者が作り込む機能です。簡略化して短期間で納品するか、納品後に更新しやすいように機能を充実させるか、それはテーマの制作者次第です。

どちらが正解かは人それぞれですが、いずれにせよ、WordPressに機能を組み込むために用意されているのがfunctions.phpです。「外観」のサブメニューだけではありません。使用中のサイトに果てしなく機能を拡張することができます。

functions.phpのファイル分割

functions.phpもCSSと同じようにファイル分割することができます。たとえば、Twenty Fifteenでは、カスタムヘッダーに関するコードはinc/custom-header.phpに記述されています。

機能が別ファイルに分割された例（Twenty Fifteen）

そのため、functions.phpの中をいくら探しても目的の機能に関するコードが見つからない場合があります。その場合、functions.phpの中で「require」という命令を探してみましょう。これは、外部ファイルを読み込む命令です。

たとえば、Twenty Fifteenではfunctions.phpの355行目あたりに次のように記述されています。

require get_template_directory() . '/inc/custom-header.php';

これにより、functions.phpの中にcustom-header.phpが読み込まれ、Twenty Fifteenでカスタムヘッダーが使用可能になります。

「require」と同じように外部ファイルを読み込む命令には次のようなものがあります。

• require
• require_once
• include
• include_once

話が長くなるので説明は省略しますが、目的の機能が見つからない場合は、このような命令で外部ファイルを読み込んでいないかチェックしてみてください。

BizVektorの例では、functions.phpには次のような「require」が見つかります。

require( get_template_directory() . '/inc/theme-options.php' );
require( get_template_directory() . '/inc/theme-options-init.php' );
require( get_template_directory() . '/inc/theme-ad-options.php' );
require( get_template_directory() . '/design_skins/001/001_custom.php' );
require( get_template_directory() . '/design_skins/002/002_custom.php' );
require( get_template_directory() . '/design_skins/003/003_custom.php' );
require( get_template_directory() . '/inc/theme-customizer.php' );

探している機能がfunctions.phpで定義されていない場合、これらのファイルに記述されているかもしれません。

functions.phpのまとめ

WordPressで使用可能な機能はfunctions.phpに記述することができます。どのような機能をサポートするか記述する必要があるため、取り組み方によっては「外観」のサブメニューが寂しい内容になったり、納品後のサイトが更新しづらくなってしまいます。

管理画面の一部のメニューを制作者が用意するという点では、DreamweaverなどのツールでHTMLベースのサイトを制作するときと発想が異なります。オリジナルのテーマを作るにはプログラミングのスキルが必要だということです。注意してください。

functions.phpから分割された機能が外部ファイルから読み込まれている場合があります。そのようなテーマではファイル数が膨大になりますが、中心はfunctions.phpです。見失わないようにしましょう。

その他のPHPファイル

ここまで、PHPファイルとしてテンプレートとfunctions.phpが存在することを説明しました。ただし、それ以外にもWordPressの入門書に載っていない名前のPHPファイルが含まれているテーマもあり、「これは何？」と不安になるかもしれませんが、あまり深刻に考えないことです。

というのは、少し説明しましたが、テンプレートやfunctions.phpでは、機能を分割した外部のPHPファイルを読み込むことができます。この記事でも次のような例を紹介しました。

• テンプレート「single.php」の中でcontent.phpを読み込む
• functions.phpの中でinc/custom-header.phpを読み込む

そのようなわけで、テーマのフォルダ内にはこの記事やWordPress入門書で紹介される「定番ファイル」以外のPHPファイルがいくつも存在する場合がありますが、深追いは禁物です。どうしても追いかけたい場合は定番のテンプレートやfunctions.phpから外部ファイルを読み込む命令を探してみてください。具体的には次のような命令です。

• get_template_part --- テンプレートの中に別のテンプレートを読み込む
• require --- functions.phpなどの中に機能関連ファイルを読み込む

膨大なファイルに驚くかもしれませんが、まずは、テーマを構成する定番ファイルを頭に入れて、その中から読み込んでいるファイルを追いかけていきましょう。

その他のファイル

その他、jQueryのJSファイルや画像も重要なファイルですが、この記事ではテーマの基本構成を理解していただくことに焦点を当てたので、詳しい説明は省略します。

JSファイル（jQuery）

WordPressのさまざまな動作でjQueryは欠かせない存在です。jQueryは拡張子が「js」のJSファイルに記述されています。開いて修正することは多くありませんが、この記事で説明したように、「動的CSS」として機能している場合があるので注意が必要です。テンプレートを調べても目的のクラス名が出てこない場合、jQueryで動的にクラス名が付加されているかもしれません。

画像

テーマによって異なりますが、背景画像やリストのアイコン画像などが含まれる場合があります。強いて注意点を挙げれば、見出しや背景などに色ではなく画像が使われる場合です。背景色を変更しようと思ったら画像だった、そんなことに注意が必要です。同じようにアイコンも通常時とマウスオーバー時でアイコンが使われている場合があります。そのようなサイトで色を変更する場合、アイコンの色と調整が必要になるかもしれません。

まとめ

以上、WordPressテーマを構成する3種類のファイルについて説明してきました。もう一度まとめておきます。テーマのカスタマイズに困ったときは思い出してください。

• レイアウトを決める「テンプレート」
  • ページ別のテンプレート --- single.php、page.php、index.phpなど
  • パーツ別のテンプレート --- header.php、footer.php、sidebar.php
• スタイルを決める「CSSファイル」 --- style.cssなど
• 機能を決める「functions.php」
• その他 --- JSファイル（jQuery）など

今回はテーマのファイル構成について説明してきました。具体的なコードの内容は別の機会に説明したいと思いますが、お急ぎでしたら以下のページも参考にしてください。

WordPressテンプレートのPHP、どこに何が書いてあるかリスト（Twenty Twelve編）

WordPressの管理画面にログインできない原因をまとめておきます。単純な原因はパスワードの間違いですが、正しいパスワードを入力してもログインできなくなる場合もあります。参考にしてください。

「WordPressにログインできない」の概要

単純な原因は「パスワード間違い」

「WordPressにログインできない」というと、単純に考えればパスワードを間違っているだけかもしれませんが、間違ってしまう事情があります。たとえば、WordPressのインストール時に指定したパスワードと、WordPress.comにユーザー登録したときのパスワードです。

パスワードが正しくてもログインできない場合も

正しいパスワードを入力してもログインできない場合があります。たとえば、メールアドレスでのログインが強制されていたり、データベースを直接変更したときにパスワードを暗号化しなかった場合です。また、少し怖い原因ですが、サイトが改ざんされていてログインできない場合もあります。

以下、定番の事例をいくつか紹介します。

ユーザー名・パスワードが間違っている

説明不要の原因ですが、念のため。ユーザー名やパスワードが間違っているとログインできません。単純にパスワードを忘れただけなら、「パスワードをお忘れですか？」からリセットできます。

パスワードを忘れたらリセットできる

WordPress.comの情報と勘違いしている

「絶対にパスワードは間違っていない、なぜならメモ帳に書いてあるから」と言い張る方がログインできない場合はWordPress.comと勘違いしているかもしれません。WordPressを使うための「ユーザー名とパスワード」は次の2種類が存在する場合があります。間違えないようにしましょう。

• WordPressインストール時に指定したユーザー名・パスワード
• WordPress.comに登録したユーザー名・パスワード

通常はWordPressをログインしたときのユーザー名とパスワードだけで十分ですが、Jetpackプラグインなどを使うにはWordPress.comにユーザー登録する必要があります。そのため、2つの情報を混同してしまう方がいます。

また、次のようなログイン画面に注意が必要です。

ログインに使う情報が異なるので注意

どちらの情報でログインするかによってクリックする場所や入力する情報が違います。

• WordPress.comに登録したユーザー名・パスワードでログインする場合は(1)
• WordPressのユーザー名・パスワードでログインする場合は(2)

メールアドレスでのログインが強制されている

セキュリティ対策としてメールアドレスでのログインを強制するプラグインがインストールされている場合、ユーザー名の代わりにメールアドレスを使う必要があります。

サイトが改ざんされている

少し怖い原因ですが、サイトが改ざんされるとページの出力制御に不具合を生じる場合があります。その場合、ユーザー情報を入力しても「Cookieが…」のようなメッセージが表示されてログイン画面から先に進めなくなります。

phpMyAdminではパスワードの暗号化が必要

マニアックな原因ですが、WordPressのパスワードはphpMyAdminなどのツールを使ってデータベースを直接変更することでリセットできます。その際、パスワードを暗号化しないと正しいフォーマットで保存されず、正しいパスワードを入力しても「パスワードが間違っている」となります。

詳しくは、以下のページをご覧ください。

phpMyAdminでWordPressユーザーのパスワードをリセットする方法

まとめ

WordPressにログインできないといっても、原因はさまざまです。単純な原因から怖い原因まで紹介しましたが、よくわからない場合はWordPress個別サポートにご相談ください。

WordPressの編集画面にコピーペーストして使える便利なCSSを紹介します。活用する場面は、少しだけデザインを調整したいときです。たとえば、申し込みボタンをセンタリングしたり、画像の下に余白を入れたり、一部の文章を枠線で囲みたいときです。

ちょっとだけデザインを調整したいことも

そんな、ちょっとしたデザイン調整のときに、CSSに慣れていればさまざまな解決策が頭に浮かんでくるかもしれませんが、慣れていないと解決策が浮かんできません。

そこで、CSSに慣れていない方のために、定番のデザイン調整に使えるコードを3パターン（センタリング・余白・枠線）紹介します。投稿や固定ページの編集画面にそのままコピーペーストして使えます。参考にしてください。

リンクや画像のセンタリング

編集画面に入力した文章や画像、ボタンなどのうち、一部をセンタリングしたいこともあります。たとえば、見ための問題でボタンやリンクなどを中央に表示したくなるかもしれません。

ボタンだけをセンタリングしたい

CSSの「text-align: center;」を使うとセンタリングすることができます。divタグを使って編集画面のテキストエディタに入力してみましょう。

まずは、編集画面のテキストエディタを使って、センタリングする部分を確認します。

テキストエディタでセンタリングしたい部分を確認

この内容を次のコードで囲みます。divタグにスタイルが指定してあり、囲んだ部分がセンタリングされる仕組みです。

<div style="text-align: center;">★センタリングする内容★</div>

「★センタリングする内容★」を実際に中央寄せしたい文字などに置き換えます。入力したイメージは次のようになります。

センタリングしたい部分をdivタグで囲む

「更新」ボタンをクリックして、ページを確認しましょう。指定した内容が中央にくるはずです。

指定した内容がセンタリングされる

文章ブロックのセンタリング

上記の例はリンクやボタンなど、ちょっとしたパーツのセンタリングでしたが、文章などではうまくいかない場合があります。

次の例では、文章のdivブロックの幅を狭くしてセンタリングしています。

文章ブロックに「text-align: center;」を指定してみたが…

ブロック自体は中央に寄らず、ブロック内の文章だけがセンタリングされてしまいます。

文章はセンタリングされたがブロックは中央にこない

この場合、「text-align: center;」の代わりに「margin: 0 auto;」を使ってみましょう。

「text-align: center;」の代わりに「margin: 0 auto;」

今度は文章のブロック全体が中央に表示され、ブロック内の文章は左寄せのままになります。

ブロック全体がセンタリングされる

画像や文章の下に余白を入れたい

画像や文章の上下に余白を入れてスペースを空けたいこともあります。

好きな場所に余白を入れたい

CSSの「margin-top」や「margin-bottom」を使うと、指定ブロックの上下に余白を入れることができます。

編集画面のテキストエディタで余白を入れる部分を確認しましょう。ここでは画像（imgタグ）の下あたりに入れるとします。

画像の下に余白を入れる

そのあたりに、次のコードを入力します。

<div style="margin-bottom:50px;">&nbsp;</div>

入力したイメージは次のようになります。

余白を入れるコードを入力

「更新」ボタンをクリックして、ページを確認しましょう。指定した部分に余白が入っているはずです。

指定した位置に余白が入る

「margin-bottom:50px;」の「50px」が余白のサイズです。あとは、好きなサイズに変更して自由に微調整してみてください。

一部の文章に枠線を付けたい

特定の文章だけを枠線で囲みたいこともあります。長い文章の中で特にお客様に見てもらいたい部分などです。

一部の文章を枠線で囲みたい

CSSの「border」を使うと、ブロックを枠線で囲むことができます。

編集画面のテキストエディタから、枠線で囲みたい部分を確認しましょう。

枠線で囲みたい部分

この部分を次のdivタグで囲みます。

<div style="border:solid 2px red;padding:5px;">★囲む内容★</div>

「★囲む内容★」を実際の文章に置き換えます。このdivタグで文章を囲んだイメージは次のようになります。

枠線を付けたい部分をdivタグで囲む

「更新」ボタンをクリックして、ページを確認しましょう。指定した部分に枠線が付いているはずです。

指定した部分が枠線で囲まれる

上記の例は実線で文章を囲んだだけでしたが、borderを使うと、さまざまな色、太さ、スタイル（実線、点線、二重線など）で枠線を付けることができます。詳しくは以下のページを参考にしてください。

スタイルシートリファレンス（border）

また、上記のCSSは枠線と余白だけでしたが、次のようなスタイルを追加して、お知らせ的な部分を強調してもよいでしょう。

• 背景色 --- background-color（例：background-color: #f6bfbc;）
• フォントサイズ --- font-size（例：font-size: 18px;）
• 文字の色 --- color（例：color: #000;）
• 文字を太字に --- font-weight:bold;

仕上がったイメージは次のようになります。

文章を枠線で囲んで目立たせる

まとめ

このように、WordPressの編集画面に入力できるCSSを覚えておくと、ちょっとしたデザインを調整したいときに役立ちます。この記事で紹介したコードを以下にまとめておきます。ご自由にお使いください。

<div style="text-align:center;">★センタリングする内容★</div>

<div style="margin: 0 auto;width:px;">★センタリングする内容★</div>

<div style="margin-bottom:50px;">&nbsp;</div>

<div style="border:solid 2px red;padding:5px;">★囲む内容★</div>