BizVektorではデザインスキンを何パターンか選べますが、グローバルメニューとヘッダー画像を入れ替えてみるとさらにデザインパターンが増えたような感じがしてワクワクするのは私だけでしょうか？

「グローバルメニューとヘッダー画像の入れ替え」と聞くとheader.phpの編集が必要に思えるかもしれませんが、ここでは、PHPを変更せずにCSSを使って実現する方法を紹介します。

仕上げるとヘッダー画像が上、その下にグローバルメニューが表示されます。

ヘッダー画像とグローバルメニューを入れ替えた例

現在は次のように「サイト名（ロゴ画像）」「グローバルメニュー」「ヘッダー画像」の順に構成されています。

初期設定ではグローバルメニューの下にヘッダー画像

ヘッダー画像を消す

まずは、「外観」-「ヘッダー」メニューで「画像を非表示」をクリックしてヘッダー画像を消します。

ヘッダー画像を消す

ロゴ画像を表示する

続いて、「外観」-「テーマオプション」メニューでヘッダー画像として使っていた画像をヘッダーロゴに設定します。

ヘッダーロゴを選択

サイトを確認すると小さいロゴ画像が表示されるはずです。

ロゴ画像が表示される

ロゴ画像のサイズを設定

初期設定ではロゴ画像の高さは最大で60pxに縮小されます。このロゴ画像を画面いっぱいに広げてヘッダー画像のように見せる作戦です。そのため、次のようなCSSを「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssに入力します。

/* ★ロゴ画像の幅を画面いっぱいに */
#header #site-title a img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 500px;
    margin-top: 0;
}

/* ★ヘッダー幅を画面いっぱいに */
#header #site-title,
#headerInner {
    width: 100%;
}

/* グローバルメニューの下線 */
#gMenu {
    border-bottom: 2px solid #C30000;
}

/* キャッチフレーズを消す */
#headerTop {
    display: none;
}

/* ヘッダー上の余白を消す */
#header {
    padding-top: 0;
}

/* ヘッダー内部の余白を消す */
#headerInner {
    margin: 0;
}

@media (min-width: 770px) {
    /* サイトタイトル下の余白を消す */
    #header #site-title {
        padding-bottom: 0px;
    }

    /* 連絡先の位置の調整 */
    #header {
        position: relative;
    }

    #header #headContact {
        width: auto;
        padding: 10px;
        background-color: #fef4f4;
        position: absolute;
        bottom: 5%;
        right: 2%;
    }
}

/* 連絡先の位置の微調整 */
#header #headContact {
    margin: 5px;
}

ヘッダー画像自体のスタイルは★が付いている最初の2ブロックだけです。それ以降は連絡先など関連パーツのスタイル調整です。

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

ヘッダー画像とグローバルメニューを入れ替えた例

多くのWordPressテーマではページナビゲーションが組み込まれているので基本的には「ページナビゲーションを組み込みたい！」で大騒ぎすることもありませんが、問題はブログの一覧表示を自作したときです。

固定ページの中でブログ記事などを一覧表示しようと思ってWP_Queryを使ってコードを作成したときに、後から「ページナビゲーションが付いていない」ということはよくあります。

そんなときはWP-PageNaviプラグインが役立ちます。たとえば、次のようなページナビゲーションを表示することができます。

WP-PageNaviによるページナビゲーション

ただし、WP_QueryとWP-PageNaviプラグインの連携方法を理解していないと、単純にプラグインの公式サイトで提示されたコードをテンプレートに入力してもページナビゲーションは表示されません。

ここでは、WP_Queryを使って自力で作成したデータ一覧のコードにページナビゲーションを組み込む方法を紹介します。

ブログ記事を一覧表示するサンプル

すでにブログ記事の一覧表示までは作成済みの方を対象にしますが、これから試す方や、自作のコードではうまくいかないのでゼロから検証したい方のために、WP_Queryを使ってブログ記事を一覧表示するコードを掲載します。固定ページのテンプレート（例：page-test.php）などに組み込んでお使いください。

<?php
/* （ステップ1）データの取得 */
$query = new WP_Query(
    array(
        'posts_per_page' => 4,
        'post_type' => 'post',
    )
);
?>
<?php
/* （ステップ2）データの表示 */
if ( $query->have_posts() ) : ?>
    <ul>
        <?php while ( $query->have_posts() ) : $query->the_post();?>
            <li><a href="<?php the_permalink(); ?>">
                <?php the_title(); ?></a></li>
        <?php endwhile; ?>
    </ul>
<?php endif; wp_reset_postdata(); ?>

表示結果は次のようになります。単純にブログ記事のタイトルを一覧表示しているだけです。

ブログ記事のタイトル一覧

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

上記のコードにページナビゲーションを組み込むため、2つのプラグイン「WP-PageNavi」と「Wp Pagenavi Style」をインストールします。

WP-PageNaviプラグインはページナビゲーションの表示に使います。

WP-PageNaviプラグインをインストール

Wp Pagenavi Styleプラグインはページナビゲーションのスタイルを設定できます。

Wp Pagenavi Styleプラグインをインストール

ナビゲーションの組み込み

冒頭で紹介したコードにページナビゲーションを組み込みます。それには、上記のコードに以下のハイライトした部分を追加します。

<?php
/* （ステップ1）データの取得 */
$paged = get_query_var('paged', 1);
$query = new WP_Query(
    array(
        'paged' => $paged,
        'posts_per_page' => 4,
        'post_type' => 'post',
    )
);
?>
<?php
/* （ステップ2）データの表示 */
if ( $query->have_posts() ) : ?>
    <ul>
        <?php while ( $query->have_posts() ) : $query->the_post();?>
            <li><a href="<?php the_permalink(); ?>">
                <?php the_title(); ?></a></li>
        <?php endwhile; ?>
    </ul>
<?php wp_pagenavi(array('query' => $query)); ?>
<?php endif; wp_reset_postdata(); ?>

追加したパーツは次の3つです。

• 3行目：現在のページ番号を取得 --- 何ページ目を表示するのか特定するのに必要です。get_query_varで取得しています。
• 6行目：ページ番号をWP_Queryに反映 --- 表示するページの番号（$paged）をWP_Queryに渡しています。
• 21行目：ページナビゲーションの表示 --- wp_pagenaviによってページナビゲーションを表示しています。表示対象のデータ（ここでは、$query）を指定することが重要です。

これで、ページナビゲーションがが表示されるようになります。

ページナビゲーションが表示される

ページナビゲーションのスタイル

スタイルは「PageNavi Style」メニューで選択することができます。

ページナビゲーションのスタイル選択

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

ページナビゲーションのスタイル変更例

パターンを選ぶだけでなくフォントサイズや色などを細かくカスタマイズすることもできます。

ページナビゲーションのスタイルのカスタマイズ

ナビゲーションがうまく表示されないとき

対象データの指定を忘れずに

ページナビゲーションを表示する関数「wp_pagenavi」では基本的に、どのデータが対象なのか指定する必要があります（サンプルコードの21行目）。

つまり、
<?php wp_pagenavi(); ?>
ではうまくいかないはずです。

<?php wp_pagenavi(array('query' => $query)); ?>
のように、WP_Queryで取得したデータの格納先（ここでは「$query」）を指定する必要があります。

ページ番号の指定を忘れずに

次の処理を組み込んで、現在は何ページ目なのか指定する必要があります。

• 現在のページ番号を取得する --- サンプルコードの3行目
• そのページ番号のデータのみを取得する --- サンプルコードの6行目

たとえば、ページナビゲーションの「2」をクリックしたときは2ページ目の内容を表示します。そのため、現在のページ番号「2」を取得して、そのページのデータのみをWP_Queryで取得する必要があります。

うまくいかない場合、6行目の「get_query_var('paged', 1)」の「paged」を「page」に変更してみてください。

「データがなかったら」のブロックに入れないこと

データの一覧表示で「if～else～endif」というif文が使われている場合、「else～endif」の間にwp_pagenaviを追加してもうまくいきません。このブロックは「データがなかったら～する」の用途で使われているからです。

if文が長くなるとブロックの開始と終了が見づらくなりますが、次のようにwp_pagenaviが「else」と「endif」の間に入っていないか確認しましょう。

<?php
/* （ステップ2）データの表示 */
if ( $query->have_posts() ) : ?>
    <ul>
        <?php while ( $query->have_posts() ) : $query->the_post();?>
            <li><a href="<?php the_permalink(); ?>">
                <?php the_title(); ?></a></li>
        <?php endwhile; ?>
    </ul>
<?php else : ?>
<?php wp_pagenavi(array('query' => $query)); ?>
<?php endif; wp_reset_postdata(); ?>

まとめ

WP-PageNaviプラグインを使うと、このように簡単にページナビゲーションを表示することができます。自作のコードでも役立ちますが、WP_Queryと連携するには wp_pagenaviを呼び出すだけでは不十分です。「現在のページの特定」や「対象データの特定」というコードの意図を理解して、正しくページナビゲーションを表示できるようにしましょう。

Webサイトに追加する会社概要やイベント概要などを表形式で作成するときに、項目が膨大すぎて入力し忘れたことはありませんか？私はあります。

そんなときは「しっかり確認しましょう」と書けば済みますが、それでは面白くありません。入力し忘れた項目に警告でも表示されれば便利ですね。公開前にチェックできます。

入力し忘れた項目に警告

CSSの「:empty」擬似クラスを使うと、要素が空かどうか判別してスタイルを設定することができます。「表のセルが空だったら背景色を赤く」のように使えば「入力し忘れた！」のチェックに役立ちますが、次のような表形式の予約状況一覧でも役立ちます。

予約が入っていない日を目立たせる

予約が入っていないセルが空であれば、「:empty」擬似クラスを使って「空いてます」などのメッセージを表示することができます。

「セルが空だったら背景色を変える」のように条件判断が必要なときはPHPで記述するのかと思って諦めてしまいそうですが、CSSで実現できるのでアイデア次第でいろいろ気軽に活用できそうですね。

もちろん活用例はこれだけではありませんが、ひとまず「入力し忘れ」と「予約が入っていない日付」の2つのケースについて具体的なCSSの例を紹介します。

入力し忘れたセルに警告として背景色を変える

次の会社概要は電話番号の入力を忘れています。

電話番号の入力を忘れている

この程度で気づかないことはないと思いますが、あくまでサンプルなので突っ込みは不要です。電話番号が入っていないことを警告するには次のようなCSSが役立ちます。

/* 空のセルの背景色を赤くする */
#content .tablepress td:empty {
    background-color: red;
}

「外観」-「CSSカスタマイズ」メニュー（BizVektorの場合）または子テーマのstyle.cssに入力してください。

ここで使った「:empty」は空の要素にマッチする擬似クラスです。電話番号を入力すべきセルが空なので警告の意味で次のように背景が赤くなります。

未入力のセルの背景が赤くなる

予約が入っていない日に「空いてます」と表示

表形式で予約状況などを示す場合、予約のないセルは空っぽになるかもしれません。

予約のない日のセルが空になっている

空いている日を目立たせるため、次のようなCSSを入力して予約のない日に「空いてます」と表示してみましょう。

/* 予約のない日のスタイルを設定 */
#content .tablepress td:empty {
    background-color: green;
}

#content .tablepress td:empty:after {
    content: '空いてます';
    color: #fff;
}

「content」で要素に文字を追加できますが、:empty擬似クラスに設定してもうまくいかないので、:after擬似クラスを使って要素の後に「空いてます」を付加しています。

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

予約のない日に「空いてます」と表示

空かどうか判断できるのはセルだけではない

:empty擬似クラスでチェックできるのは表のセルだけではありません。たとえば、次の箇条書きは3番目の要素が空です。

<ul class="ul01">
<li>一郎</li>
<li>次郎</li>
<li></li>
<li>史郎</li>
</ul

これも:empty擬似クラスでチェックできます。

#content .ul01 li:empty {
    background-color: red;
}

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

空の要素が赤くなる

まとめ

このようにCSSの:empty擬似クラスを使うと空の要素に対してスタイルを設定することができます。ここで紹介したケースの他にもカレンダー形式のスケジュール管理やイベント予約など、アイデア次第で幅広く活用できると思います。参考にしてください。

WordPressで作成中のサイトで「トップページだけタイトルを消したい」とか、「固定ページのサイドバーを消したい」など、ページごとにデザインやレイアウトを変えたいことはありませんか？

そんなときはページのbodyタグを見てみましょう。

bodyタグを見ればページが特定できる

次のように長いclass名が付いているはずです。

<body class="home page page-id-132 page-template-default…略…">

「home」がトップページだということを示しています。「page」は固定ページ、「page-id-132」はページ番号（post id）が132番のページだという意味です。

このように、各ページのbodyタグには、そのページを識別するさまざまなclass名が付加されています。その規則性を活かして「トップページだけ」や「アーカイブページだけ」などの条件で特定のページのスタイルだけを変更することができます。

bodyタグにclass名が付いていない場合

さっそく自分のサイトのbodyタグを確認してみて「class名なんて付いていませんが？！」という方。たとえば、こんな感じでしょうか。

<body>

多くのテーマではbodyタグに長いclass名が付いているはずですが、制作を外部に依頼したオーダーメイドのサイトなどでは、このようなアッサリしたbodyタグのサイトが納品されてくる場合があります。

その場合、テーマのheader.php（できれば子テーマで）を開いてbodyタグを次のように変更してみてください。

<body <?php body_class(); ?>>

少し紛らわしいので慎重に作業してください。<body>の間に<?php body_class(); ?>を差し込むイメージです。

これで、表示中のページに応じて複数のclass名が出力されるようになります。

「body_class」によって付加されるclass名

このbody_classという命令によって、そのページに関連する複数のclassが自動生成されます。フロントページには「home」、投稿のトップページには「blog」、アーカイブには「archive」という具合です。

他にもページの種類に応じてclass名が作成されます。主なものを紹介します。

• フロントページ --- home
• 固定ページ
  • page
  • page-id-ページID（例：page-id-1234）
  • 親ページの場合 --- page-parent
  • 子ページの場合
    • page-child
    • parent-pageid-親ページID（例：parent-pageid-1234）
      → 共通の親ページを持つ子ページが同じclassになる
• テンプレートを使用したページ --- page-template-テンプレート名
  （例：page-template-nosidebar） → 同じテンプレートで作ったページが同じclassに
• 投稿のトップページ --- blog
• アーカイブ --- archive
• 年月アーカイブ --- date
• 著者アーカイブ
  • author
  • author-ユーザー名（例：author-nishizawa）
  • author-ユーザーID（例：author-1）
• カスタム投稿タイプのアーカイブ
  • post-type-archive
  • post-type-archive-カスタム投稿タイプ（例：post-type-archive-info）
• カテゴリーページ
  • category
  • category-スラッグ（例：category-event）
    ※スラッグが日本語の場合は作成されません。タグページなども同じです。
  • category-カテゴリーID（例：category-2）
• タグページ
  • tag
  • tag-スラッグ（例：tag-event）
  • tag-タグID（例：tag-2）
• カスタムタクソノミーページ
  • tax-カスタムタクソノミースラッグ（例：tax-shops）
  • term-タームスラッグ（例：term-cafe）
  • term-タームID（例：term-8）
• 添付ファイル
  • attachment
  • attachmentid-添付ファイルID（例：attachmentid-1234）
  • attachment-MIMEタイプ（例：attachment-jpeg）
• 検索結果 --- search
  • 検索結果が存在する場合 --- search-results
  • 検索結果が存在しない場合 --- search-no-results
• 2ページ目以降 --- paged
• 404ページ --- error404
• 個別投稿
  • single
  • single-投稿タイプ（例：single-post）
  • postid-投稿ID（例：postid-1234）
  • single-format-投稿フォーマット（例：single-format-standard）
• ログイン中の場合 --- logged-in

さらに詳しく調べたい方はwp-includes/post-template.phpのget_body_class関数をご覧ください。

「このページだけ」を指定する方法

これらのclass名を使えば「このページだけにスタイルを適用」を実現できます。その考え方を説明しておきます。

たとえば、トップページの見出しのフォントサイズを大きくしたいと思ったとします。その際、単純にh1に対して「font-size: 30px;」を指定すればフォントサイズは変更できますが、サイト全体に反映されてしまいます。

h1 {font-size: 30px;}

この場合、トップページに付加される「home」というclass名を追加すればトップページだけにスタイル適用を限定することができます。単なるh1ではなく「トップページのh1」になったということです。

.home h1 {font-size: 30px;}

以下、いくつかのページでスタイルを切り替える例を紹介していきます。便宜上、ヘッダーの背景色を変える例で説明しますが、ヘッダーだけでなくサイドバー、フッター、グローバルメニューなどの色や背景画像をページごとに切り替えたいときも考え方は同じです。自由にカスタマイズしてください。

トップページ／トップページ以外

トップページ

「トップページのみ～したい」ときは「.home」を指定します。

/* トップページのみスタイルを設定 */
.home #header { 
    background-color: #060;
}

トップページは次のようになります。

トップページのみスタイルが変わる

トップページ以外には反映されません。

トップページ以外にはスタイルが反映されない

トップページ以外

逆に、トップページはスタイルを設定せずにトップページ以外の全ページにスタイルを設定したい場合は、:not擬似クラスを使います。「:not(.home)」で「homeクラス以外」を指定できます。

/* トップページ以外にスタイルを設定 */
body:not(.home) #header { 
    background-color: #060;
}

トップページ以外にスタイルが反映されます。

トップページ以外でスタイルが反映される

トップページには反映されません。

特定のページ／特定の記事

固定ページ

「問い合わせページだけ別のレイアウトにしたい」とか「この記事には広告を表示したくない」のように特定のページのみにスタイルを設定したい場合は、そのページのbodyタグを調べましょう。個別のclassが付いているはずです。

そのページ固有のclassを調べる

この例では「page-id-8」というclass名が見つかります。これは「ページ番号が8」のページに付加されるclass名です。全ページに異なるclass名が自動で付加されているので、「このページだけスタイルを変えたい」ときに使えます。

たとえば、「.page-id-8 #header」というセレクタを組み立てれば、「ページ番号が8」（例：会社概要）のスタイルのみを変更できます。

/* 特定のページのスタイルを設定 */
.page-id-8 #header { 
    background-color: #060;
}

個別の投稿（ブログ記事）

投稿の場合も同じようにbodyタグを調べると「postid-73」のようなclass名が付いています。

個別記事のclass名を調べる

これを使ってセレクタを組み立てることができます。

/* 特定の記事のスタイルを設定 */
.postid-73 #header { 
    background-color: #060;
}

複数ページ一括でスタイル設定したい場合

複数ページにまとめて同じスタイルを設定したい場合は、上記のようにページごとに固有のclass名を1つずつ指定する方法もありますが面倒かもしれません。

同じ親ページを持つ子ページ

固定ページに親子関係を設定した場合、子ページは同じ親ページのIDを持つことになります。これを利用して、「同じ親ページに属する子ページ」に対してまとめて同じスタイルを設定することができます。たとえば、「会社概要」の子ページ「所在地」のbodyタグを見てみましょう。

このページの番号と親ページの番号

このページ固有のclass「page-id-16」と共に親ページのclass「parent-pageid-8」が見つかるはずです。そのclassに対してスタイルを設定すれば複数の子ページにまとめて同じスタイルを設定することができます。

/* 同じ親ページに属する子ページのスタイルを設定 */
.parent-pageid-8 #header { 
    background-color: #060;
}

特定のテンプレートで作成したページ

固定ページの作成時にテンプレートを選択できる場合、選択したテンプレート名がclass名に反映されます。たとえば、Twenty Fourteenで「全幅テンプレート」を選びます。

ページ作成時にテンプレートを選択

このページには「page-template-full-width」というclass名が付加されます。これを利用して、同じテンプレートを使っているページに対してまとめて同じスタイルを設定することができます。

投稿の一覧ページ

カテゴリーページ

カテゴリーページについては「archive」「category」「category-カテゴリー名」「category-カテゴリーID」のようなclass名が付いています。これを使ってスタイルを設定することができます。

/* 特定のカテゴリーページのスタイルを設定 */
.category-event #header { 
    background-color: #060;
}

セレクタに「archive」や「category」を指定すればすべてのアーカイブページ、「category-カテゴリー名」や「category-カテゴリーID」を指定すれば特定のカテゴリーページのスタイルを設定できます。

アーカイブページ

年月別などで記事を一覧表示するアーカイブページには「archive」や「date」などのclass名が付加されます。

• 全アーカイブページ --- archive
• 年月アーカイブ --- date
• 著者アーカイブ --- author／author-ユーザー名／author-ユーザーID

検索結果

検索結果のページには「search」や「search-results」のようなclass名が付加されます。

• 検索結果共通 --- search
• 検索結果が存在する場合 --- search-results
• 検索結果が存在しない場合 --- search-no-results

投稿のトップページ

全カテゴリーの記事が一覧表示される「投稿のトップページ」には「blog」というclass名が付加されます。

投稿のトップページのclass名は「blog」

次のようなCSSでスタイルを設定できます。

/* 投稿のトップページのスタイルを設定 */
.blog #header { 
    background-color: #060;
}

まとめ

このように、各ページのbodyタグに付加される固有のclass名を活用することで、そのページだけにスタイルを適用することができます。「それ以外」を示す:not擬似クラスも合わせて使うことで、活用の幅が広がります。あとは、あなたのアイデア次第です。試行錯誤してみましょう。

「テーマを変更したらアイキャッチ画像のサイズがおかしくなった」

よく聞く問題です。たとえば、こんな感じで縮んだり引き延ばしになってしまったり。

テーマを変えたらアイキャッチ画像が縮んだ

そんなときはアイキャッチ画像を作り直しましょう。

といっても作業は簡単。Regenerate Thumbnailsプラグインをインストールして実行するだけです。

Regenerate Thumbnailsプラグインをインストール

インストール後、「ツール」‐「Regen. Thumbnails」メニューで「Regenerate All Thumbnails」ボタンをクリックすれば、すべての画像についてアイキャッチ画像（投稿サムネイル）が再作成されます。

作業はこれで終わりですが仕組みが気になる方のために、なぜテーマを変更するとアイキャッチ画像の表示がおかしくなるのか簡単に説明します。

アイキャッチ画像はここにある

まず、テーマ変更前は次のように問題なくアイキャッチ画像が表示されています。

テーマ変更前はアイキャッチ画像の表示に問題はない

この画像は、元になる画像をアップロードした時点で作成されます。編集画面で選択できる「中サイズ」「大サイズ」などの画像と一緒に複数の画像が作成されるのが一般的です。

たとえば次のようにサイズの異なる画像が作成されます。

1枚の画像から各種サイズの画像が作成される

「サムネイル」や「中サイズ」とは「設定」‐「メディア」メニューでサイズを設定できる画像で、テーマとは関係なくWordPressの基本機能で作成されます。

その他の画像はテーマによって追加された画像です。「記事を一覧するときは幅200pxの画像を使いたい」のような発想に基づいて、上記の「中サイズ」などの画像と一緒にテーマ独自の画像を作成することができます。

まとめると、この例では「ab.jpg」という画像から次の画像が作成されています。

• ab.jpg --- アップロードした画像
• ab-150x150.jpg --- サムネイル画像（WordPressの基本機能）
• ab-200x200.jpg --- テーマ独自の画像（複数の場合も）
• ab-300x200.jpg --- 中サイズ画像（WordPressの基本機能）

ab-300x200.jpgの「300x200」は幅300px、高さ200pxというサイズを示しています。サイズの異なる画像を何枚か作成することで、「ここは小さい画像で」「ここは大きい画像で」のように用途に応じて別々の画像を表示することができます。

重要なことは、これらの画像はテーマが自由にサイズを決められるということです。しかも、その画像が作成されるタイミングは画像のアップロード時です。

つまり、テーマを切り替えると、変更後のテーマで使う画像が存在しないという問題が発生する可能性があります。

テーマ変更でアイキャッチ画像に違和感が

同じテーマを使い続けている間は問題も起きないので、こうした仕組みを知らなくても大丈夫です。ところが、テーマを切り替えると、「テーマ独自の画像」が異なるため「アイキャッチ画像のサイズがおかしい！」のような問題が起きます。

たとえば、テーマをBizVektorからSimplicityに切り替えてみます。アイキャッチ画像の表示がおかしくなるでしょう。具体的には女性が細長くなったように見えませんか？

BizVektorからSimplicityに切り替えたらアイキャッチ画像の女性が細長くなった

原因は、変更前後のテーマで準備されている画像が異なるためです。

変更後のテーマ（Simplicity）でアイキャッチ画像を表示する部分のコードの例を見ると「thumb150」という名称の画像を表示することになっています。

<?php the_post_thumbnail( 'thumb150', …略…); ?>

この「thumb150」のような名称はテーマ側で自由に命名できる画像名（ファイル名ではありません）です。具体的にはfunctions.phpに次のようなコードが書かれています。

add_image_size('thumb150',150,150,true);

これにより、このテーマで画像をアップロードすると幅150px、高さ150pxの画像が作成され、「thumb150」という名称（しつこいですがファイル名ではありません）でデータベースに登録されます。

興味がある方はWordPressデータベースのwp_postmetaテーブルを開いてmeta_keyフィールドが「_wp_attachment_metadata」のデータを探してみてください。アップロードされた画像について、同時に作成されたファイル名と画像名が格納されているはずです。

変更後のテーマ（Simplicity）の画像構成は次のようになっています。

Simplicityの画像構成

記事を一覧するときに「thumb150を使います」と呼び出したとしても変更前のテーマ（BizVektor）では「thumb150」という名称の画像が登録されていないでしょう。

そのため、代わりに表示された画像のサイズが正規のスタイル定義にマッチせずに縮んだり引き延ばしになったりします。

テーマを切り替えても問題が起きないことも

テーマを切り替えても問題が起きないこともあります。それは、偶然、共通の画像を表示していたからです。

たとえば、WordPressの基本機能では「設定」‐「メディア」メニューにあるようにサムネイル画像、中サイズ画像、大サイズ画像などが作成されます。これはテーマに関係なくWordPressの基本機能です。

これらの画像は、アイキャッチ画像を表示する命令「the_post_thumbnail」で、次のような画像名を指定して表示することができます。

• thumbnail --- サムネイル
• medium --- 中サイズ
• large --- 大サイズ
• full --- フルサイズ

サムネイルを表示するコードの例は次のようになります。

<?php the_post_thumbnail( 'thumbnail', …略…

変更前後のテーマで、このように「共通の画像名」を使って見出し画像を表示している場合、アイキャッチ画像の表示問題が発生しないこともあります。

解決策はアイキャッチ画像を作り直すか既存の画像を使うか

解決策1：アイキャッチ画像を再作成する

解決策はすでに紹介したように、アイキャッチ画像を再作成するだけです。それには、Regenerate Thumbnailsプラグインをインストールして、「ツール」‐「Regen. Thumbnails」メニューで「Regenerate All Thumbnails」ボタンをクリックすれば大丈夫です。

解決策2：既存のアイキャッチ画像を使う

上記の方法で簡単に解決できますが、WordPressの勉強のついでにテンプレートを修正する練習をしてみたい方は、アイキャッチ画像を表示している命令「the_post_thumbnail」で指定された画像名（例：thumb150）を変更してみましょう。

たとえば、次のように「thumbnail」に変更してみます。

<?php the_post_thumbnail( 'thumbnail', …略…

投稿の見出し画像が正しく表示されるかもしれません。正しい対応ではないので、「お試し」にとどめてください。

投稿の見出し画像が正しく表示される

「thumbnail」の部分は次のような文字に変えることで、さまざまなサイズの画像を表示することができます。ただし、多くのテーマではCSSで制御されている画像サイズも修正する必要があるはずなので深追いは禁物です。

• thumbnail --- サムネイル
• medium --- 中サイズ
• large --- 大サイズ
• full --- フルサイズ

アイキャッチ画像を表示するthe_post_thumbnailについて詳しくは、以下のページをご覧ください。

WordPressドキュメント：テンプレートタグ「the_post_thumbnail」

まとめ

アイキャッチ画像はテーマのfunctions.phpでサイズと名称を登録し、テンプレートのthe_post_thumbnailで表示するという仕組みです。テーマを変更すると、変更前後の設定が異なるため「サイズがおかしい」のような問題が発生します。これらの仕組みについて深入りする必要はありませんが、使用中のテーマでアイキャッチ画像のサイズを変えてみたい方は参考にしてください。

WordPressのカスタマイズにPHPは必須ではありませんが、PHPに慣れていると「ページやサイドバーで好きなPHPスクリプトを入力できれば便利なのに」と思うかもしれません。たとえば、こんな感じに。

好きなPHPスクリプトを入力できれば便利かも

通常は投稿の本文などにPHPスクリプトを入力しても実行されないのですが、プラグインを使うことで解決できます。

以下、ページやサイドバーで任意のPHPスクリプトを入力して実行する方法を紹介します。

投稿や固定ページの本文でPHPを実行する

本文にPHPスクリプトを入力して実行したい場合は、Insert PHPプラグインが役立ちます。

Insert PHPプラグインをインストール

インストール後の特別な設定は不要です。本文に[insert_php]～[/insert_php]のショートコードで入力したPHPスクリプトが実行可能になります。言うまでもありませんが次のように文章とPHPスクリプトを混ぜることもできます。

本文にショートコードを使ってPHPスクリプトを入力

「現在の時刻は」や「です。」は普通の文字で[insert_php]～[/insert_php]で囲まれた部分がPHPスクリプトです。

入力したコードは次のとおりです。現在の日時を表示しています。

[insert_php]echo date_i18n("Y/m/d H:i:s");[/insert_php]

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

PHPが実行されて日時が表示される

複数行のPHPスクリプト

コードは1行にまとめる必要はありません。改行して複数行で入力することができます。

本文に複数行のPHPを入力

入力したコードは次のとおりです。簡単なおみくじです。

[insert_php]
$kuji = array("大吉", "中吉", "小吉", "凶");
shuffle($kuji);
echo $kuji[0];
[/insert_php]

（※配列をランダムに並べ替える（おみくじ・抽選プログラムを例に）より）

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

PHPが実行されておみくじの結果が表示される

サイドバーでPHPを実行する

上記のショートコードはサイドバーでは機能しません。サイドバーでPHPを実行したい場合は、PHP Code Widgetプラグインが役立ちます。

PHP Code Widgetプラグインをインストール

インストール後、「外観」-「ウィジェット」メニューを開くと、利用できるウィジェットに「PHP Code」が追加されています。これを任意のサイドバーに追加しましょう。

「PHP Code」をサイドバーに追加

入力したPHPスクリプトが実行できるようになります。PHPスクリプトの内容は上記の「おみくじ」と同じです。開始終了タグだけが違います。

サイドバーで実行するPHPを入力

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

サイドバーでPHPが実行される

Welcartの商品ページで商品画像のサイズをカスタマイズする方法を紹介します。

といっても、Welcartに最適化されたテーマ（例：http://welthemes.com/）では商品画像のサイズも良い感じにレイアウトされているので、ここでのカスタマイズは不要でしょう。

それに対してBizVektorなど一般的なテーマはWelcartに最適化されていないので、画像サイズが小さく感じることもあります。たとえば、以下の左側のイメージです。

Welcartの商品ページの画像サイズを大きくしたい

ここでは上記の右側のように商品画像のサイズを変更する方法を紹介します。

以下の内容はWelcartのバージョン 1.5.1で検証しています。

商品のメイン画像とサムネイル画像

商品ページに表示されるメイン画像とサムネイル画像は、Welcartの商品マスターメニューでアップロードされた画像が使われます。

アップロードした画像は「Welcart Shop」‐「商品情報編集」画面にて次のように一覧表示されます。

商品のメイン画像とサムネイル画像

一番上の画像がメイン画像として使われます。2番目以降が順番にサムネイル画像として表示されます。この順番は画像をドラッグアンドドロップして変更できます。ひとまずアップロードする画像のサイズは意識しないで大丈夫ですが、この記事の内容を試すなら大きい画像をアップロードしておくと良いでしょう。

商品画像の表示（single_item.php）

Welcartの商品詳細ページ（購入ページ）は次のように表示されます。画面上部の画像がメイン画像、下に並んだ画像がサムネイルです。

初期設定では、メイン画像が幅200px、高さ250px、サムネイルが幅137px、高さ200pxとなっていますが、このサイズで切り取って表示されるわけではないので、「これくらいのサイズの画像が表示される」と、ふわっとしたイメージで考えてください。

一般的なテーマの商品詳細ページ（ BizVektorの例）

BizVektorのようにWelcartのテンプレートを使っていないテーマでは、これらの画像を含めた商品詳細ページの表示にはWelcartのインストール先（usc-e-shopフォルダ）のtemplatesフォルダにあるsingle_item.phpが使われます。

商品画像のサイズ変更

上記の商品メイン画像(1)やサムネイル画像(2)もsingle_item.phpから出力されます。これらの画像のサイズを変更していきましょう。

(1)商品のメイン画像

商品のメイン画像(1)は、single_item.phpの次のコードから表示されます。

$itemImage = usces_the_itemImage(0, 200, 250, $post, 'return');

この「200, 250」が画像の幅と高さを示しています。簡単に作業したければこの数字を「500, 500」のように変更すればメイン画像のサイズを変更できます。

ただし、プラグイン本体を修正することのデメリットは大きい（Welcartをバージョンアップできなくなる）ので、本体のsingle_item.phpを直接修正せずに、メイン画像のために用意されたusces_filter_the_itemImageフックを使った方が無難です。

具体的には次のようなコードを子テーマのfunctions.phpなどに入力します。

/* 商品メイン画像のサイズ設定 */
function my_usces_filter_the_itemImage($itemImage, $post) {
    return usces_the_itemImage(0, 800, 800, $post, 'return');
}
add_filter('usces_filter_the_itemImage', 'my_usces_filter_the_itemImage', 10, 2);

「800, 800」は幅800px、高さ800pxを示しています。おおざっぱに設定してあるので、画面表示を見て自由に適切なサイズにカスタマイズしてください。

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

商品のメイン画像のサイズを変更

(2)商品のサムネイル画像

サムネイル画像(2)もsingle_item.phpから出力されます。

$itemImage = usces_the_itemImage($id, 137, 200, $post, 'return');

「137, 200」というサイズ設定によって基本的にはサムネイル画像（幅150px、高さ150px）が表示されることになります。

この部分にもusces_filter_the_SubImageというフックが設定されているので、次のようなコードを子テーマのfunctions.phpなどに入力すればサムネイルのサイズを変更することができます。

/* 商品サムネイル画像のサイズ設定 */
function my_usces_filter_the_SubImage($itemImage, $post, $id) {
    return usces_the_itemImage($id, 300, 300, $post, 'return');
}
add_filter('usces_filter_the_SubImage', 'my_usces_filter_the_SubImage', 10, 3);

初期設定の中サイズ画像に合わせて画像のサイズ制限を「300, 300」（幅300px、高さ300px）に設定していますが、自由に変更して、いろいろと試してみてください。

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

サムネイル画像のサイズを変更

あとは、みなさんのアイデア次第です。いろいろと試行錯誤してみましょう。

BizVektor NEATでグローバルメニューのアイコンの色を変更する方法を紹介します。メニューで設定できる「キーカラー」はアイコンだけでなくサイト全体に反映されてしまうため、工夫が必要です。気になる方は参考にしてください。

BizVektor NEATでグローバルメニューのアイコン色だけを変更する

BizVektor NEATのアイコンの色はサイトのキーカラーと共通

BizVektorの拡張デザインスキン「NEAT」では、グローバルメニューにアイコンを付加できます。

BizVektor NEATのグローバルメニューのアイコン

アイコンの色は「外観」-「カスタマイズ」メニューの「NEAT 設定」‐「キーカラー」で変更できます。

グローバルメニューのアイコンの色は変更できるが…

ただし、この設定はアイコンの色だけでなくサイト全体のキーカラー（テーマカラー）にも反映されるので注意が必要です。

選択したキーカラーはサイト全体に反映される

「アイコンの色だけ」を変更するには

サイト全体のキーカラーに影響を与えずアイコンの色だけを変更したい場合は、次のようなCSSを使う方法があります。

/* グローバルメニューのアイコン色を変更 */
#gMenu .menu li a strong::before {
    color: #b7282e;
}

「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssに入力してください。

「外観」-「CSSカスタマイズ」メニューに入力した例

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

グローバルメニューのアイコン色だけを変更

「color: #b7282e;」の「#b7282e」が色の設定（カラーコード）です。インターネットで検索してカラーコードを調べていただき、好きな色に変更してください。

アイコンの色を2色で交互に切り替える

アイコン色を2つ使って「赤」「青」「赤」「青」のように交互に切り替えるには、次のようなCSSを使います。

/* グローバルメニューのアイコン色（奇数） */
#gMenu .menu li:nth-child(odd) a strong::before {
    color: #b7282e;
}

/* グローバルメニューのアイコン色（偶数） */
#gMenu .menu li:nth-child(even) a strong::before {
    color: #c7dc68;
}

「color:」に指定してある「#b7282e」と「#c7dc68」が2色のアイコン色になります。好きな色に変更してください。

箇条書きのliに対して1,3,5…番目（奇数）と、2,4,6…番目（偶数）で使う色を切り替える仕組みです。たとえば、「li:nth-child(even)」は「偶数番目の子要素」という意味です。liがulの子要素だということを利用して順番などを指定することで一括でスタイルを設定できます。

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

アイコンの色を2色で交互に切り替える

あとは、いろいろとお試しください。

BizVektorのヘッダー画像の上に別の画像を重ねて表示する方法を紹介します。「申し込みはこちら」や「こちらからクーポンをGet」のようなボタンやバナー画像を表示するのが定番の活用例です。たとえば、こんな感じです。

BizVektorのヘッダー画像の上にバナーを表示する

BizVektorの特徴的なヘッダー画像を活かしてトップページに機能性を持たせたりユーザーの導線を作るのに役立ちます。

BizVektorならバナーを準備しなくてもボタン風リンクを簡単に表示できます。たとえば、こんな感じです。

ヘッダー画像の上に申し込みページへのリンクボタンを表示した例

以下、手順を簡単に説明します。

ヘッダー画像の上に表示するボタンを作成

さっそくですが、子テーマのfunctions.phpに次のようなコードを入力すれば、ヘッダー画像の上に表示する要素を作成できます。

function my_biz_vektor_header_image_front($value) {
$temp =  <<<EOM
<div class="headButton">
<a href="#"><img src="http://….png" width="180" height="80" /></a>
</div>
EOM;

    $value2 = preg_replace('/<div class="slideFrame">/',
        '<div class="slideFrame">' . $temp, $value);

    return $value2;
}
add_filter('biz_vektor_header_image_front',
    'my_biz_vektor_header_image_front');

ハイライトした部分がヘッダー画像に重ねるパーツです。ここでは画像リンクにしていますが、ただの画像でもリンクでもバナーでも自由にカスタマイズしてください。

カスタマイズするときは「EOM;」に注意が必要です。これは行頭に置く必要があります。つまり、次のようにタブなどを入れてインデントすると画面が真っ白になります。ご注意ください。

function my_biz_vektor_header_image_front($value) {
    $temp =  <<<EOM
    <div class="headButton">
    <a href="#" class="btn btnL">お得なクーポンはこちら！</a>
    </div>
    EOM;
…略…

無事に画面が真っ白にならなかった方は、続いてCSSを記述しましょう。

追加した要素をヘッダー画像の上に表示

次のCSSを「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssに入力すると、追加したボタンやバナーがヘッダー画像の上に表示されるようになります。

/* ヘッダー画像の上にアイテムを表示 */
.headButton {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30%;
    z-index: 999;
}

/* ヘッダー画像に乗せる画像のサイズ調整 */
#topMainBnr .headButton img {
    width: auto !important;
    height: auto;
}

「left」「right」「bottom」は、ヘッダー画像からの相対的な位置指定です。数字を変更して表示結果を調整してください。省略していますが「top」を使うとヘッダー画像の上からの相対位置を指定することができます。

ここまで、functions.phpとstyle.cssを修正しました。表示結果は次のようになります。

BizVektorのヘッダー画像に別の画像を重ねて表示する

リンクボタンを表示する場合

バナーを作成するのが面倒な場合や、単純にリンクボタンを表示したい場合は、上記で紹介したfunctions.phpに記述するコードのうち、ハイライトした部分を次のように変更します。

<a href="#" class="btn btnL">お得なクーポンはこちら！</a>

「#」は具体的なリンク先のURL（例：http://example.com/coupon）に修正してください。「お得なクーポンはこちら！」も自由に直してください。

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

ヘッダー画像の上にリンクボタンを表示

以上です。スマホ表示には最適化していません。いろいろと試行錯誤してみてください。

グローバルメニューの下に英語表記などを追加したくなることはありませんか？たとえば、こんな感じです。

グローバルメニューの2行目に英語表記

多くのテーマでは「メニューの1行目は日本語、2行目は英語」のような機能に対応していませんが、CSSを記述すればグローバルメニューの2行目に英語表記を追加することができます。PHPは修正しなくても大丈夫です。

以下、手順を説明します。

メニュー項目のIDを調べる

通常のテーマではグローバルメニューの各項目に固有のIDが付いています。まずは、その名前を調べます。

それには、HTMLソースを見たり、ブラウザの「要素の検証」メニューから、グローバルメニュー各項目に該当するliタグを見つけましょう。

グローバルメニュー各項目のIDを調べる

この例では各項目のIDは次のようになっています。

• ホーム --- menu-item-5270
• サービス --- menu-item-5163
• ご利用案内 --- menu-item-5166
• 会社概要 --- menu-item-5165
• ブログ --- menu-item-5164
• ご予約 --- menu-item-5171

メニュー項目ごとにCSSで英語表記を設定

このIDに対してスタイルを指定すればメニュー項目ごとのスタイルを設定できます。たとえば、メニュー項目（リンクのaタグ）の後に文字を追加できる:after擬似要素を使って「home」という文字を表示してみます。

#menu-item-5270 a:after {
    content: 'home';
}

これで、「ホーム」の横に「home」と表示されます。下ではなく横に表示されたのは失敗ですが、まずは「ホーム」固有のスタイルを設定できたことを確認しましょう。

「ホーム」の横に「home」と表示される

「home」を「ホーム」の横ではなく下に表示するには

「home」が「ホーム」の横に表示されてしまうのは、:after擬似要素がインライン要素（同じ文章として表示される）のためです。多くの方がつまづく定番の失敗なので、ここでもわざと失敗してみました。

:after擬似要素に「display: block;」を指定（同じ文章ではなく別のブロックとして表示）することで、「home」は「ホーム」の下に表示されるようになります。

#menu-item-5270 > a:after {
    content: 'home';
    display: block;
}

あとは自由に余白（例：margin-top: 5px;）や中央寄せ（例：text-align: center;）などを指定してみてください。

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

「ホーム」の下に「home」が表示される

直下のリンクのみに英語表記を付加する

上記のCSSにもう1つ注意点があるとすれば、子供のメニュー項目の下に英語表記が付かないようにすることです。次の失敗イメージを見ればピンとくると思います。

子要素にも「service」が付いてしまう

これを防ぐには「>」（直下セレクタ）を使って、親メニューの直下にあるリンクタグのみ、英語表記が付くように指定します。具体的には次のようなコードになります。

/* サービス：service */
#menu-item-5163 > a:after {
    content: 'service';
    display: block;
    text-align: center;
}

グローバルメニューを仕上げると、次のようになります。

親要素のみに英語表記が付くグローバルメニューが完成

メニュー全体に設定したCSS

メニュー全体に設定したCSSをまとめておきます。長くなってわかりづらいかもしれませんが、IDの番号と「content:」の内容を合わせれば良いだけです。

/* ホーム：home */
#menu-item-5270 > a:after {
    content: 'home';
    display: block;
    text-align: center;
}

/* サービス：service */
#menu-item-5163 > a:after {
    content: 'service';
    display: block;
    text-align: center;
}
 
/* ご利用案内：guide */
#menu-item-5166 > a:after {
    content: 'guide';
    display: block;
    text-align: center;
}
 
/* 会社概要：company */
#menu-item-5165 > a:after {
    content: 'company';
    display: block;
    text-align: center;
}
 
/* ブログ：blog */
#menu-item-5164 > a:after {
    content: 'blog';
    display: block;
    text-align: center;
}
 
/* ご予約：booking */
#menu-item-5171 > a:after {
    content: 'booking';
    display: block;
    text-align: center;
}

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

グローバルメニューの2行目が英語表記に

上記のCSSは多くのテーマでうまくいくように書いたので無駄があります。たとえば、「display: block;」や「text-align: center;」はメニュー固有の設定ではなくメニュー全体で共通のスタイルなので、1回だけ定義すれば済むはずです。

その書き方はテーマによって違ってくるので、ここでは紹介しないことにします。スッキリしたコードにしたい方や、うまくいかない方はWordPress個別サポートにご相談ください。

メニューの2行目にアイコンを表示する

グローバルメニューの2行目に英語表記ではなく、アイコンを表示する方法を紹介します。

ここでは、Twenty Thirteen、BizVektor、Stinger5など多くのテーマで使用可能になっているアイコンフォント「Font Awesome」を使います。

Font Awesomeを使ったことがない方は、以下のページも参考にしてください。

Font Awesomeの使い方

Font Awesome Iconsで選んだアイコンを指定してCSSを記述します。英語表記のときに使ったCSSと考え方は同じです。違うのは「content」にアイコンのコードを指定することと、「font-family」に「FontAwesome」を指定することです。「ホーム」の下にアイコンを表示する例は次のようになります。

/* 「ホーム」の下にアイコンを表示 */
#menu-item-5270 > a:after {
    display: block;
    content: '\f13d';
    font-family: FontAwesome;
    text-align: center;
    margin-top: 5px;
}

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

「ホーム」の下にアイコンを表示する

メニュー項目ごとに別々のアイコンを表示するなら、英語表記と同じように個別のCSSセレクタを作成してアイコンを指定すれば大丈夫です。

すべてのメニュー項目で同じアイコンを表示すれば良いのであれば、メニュー全体に対して「親メニューの下にアイコンを表示」のようなCSSを作成します。

ul.nav-menu > li > a:after {
    display: block;
    content: '\f13d';
    font-family: FontAwesome;
    text-align: center;
    margin-top: 5px;
}

表示結果は次のようになります。子要素にはアイコンが付いていません。

すべてのメニュー項目の下に同じアイコンを表示

ついでに、スマホメニューでアイコンが表示されないように「幅が広い端末のみで表示」という条件を設定しておいた方が良いかもしれません。

/* スマホ以外のグローバルメニュー下にアイコンを表示 */
@media (min-width: 644px) {
    ul.nav-menu > li > a:after {
        display: block;
        content: '\f13d';
        font-family: FontAwesome;
        text-align: center;
        margin-top: 5px;
    }
}

まとめ

「グローバルメニューの2行目に英語表記」と聞くとPHPの修正が必要のように思えるかもしれませんが、実際はCSSを修正すれば可能です。あとは、みなさんのアイデアでいろいろとカスタマイズしてみてください。

ホームページ制作を外部に依頼するときにWordPressで作ってもらう方もかなり増えているようです。「WordPressで作ってもらえば自分で簡単に直せるから」が、大きな理由ではないでしょうか。

ところが、サイトの制作手法によっては簡単にページを修正できない場合があります。

その定番が「編集画面を開いても固定ページを簡単に修正できない！」です。
どういうことなのでしょうか？

編集画面を開いてもページを簡単に修正できるとは限らない？！

以下、典型的な例を紹介します。納品後の方は今すぐチェック、発注前の方は、このような構成で納品されても大丈夫かどうか検討してください。

編集画面を開いてビックリ！そこには何も書かれていない

たとえば、納品されたサイトに含まれる会社概要を修正しようと思って「編集」ボタンをクリックしてみてビックリ！

会社概要を修正しようと思ったが…

次のように、編集画面の本文には何も書かれていなかったからです。これでは内容を修正できませんね。それにしても、会社名などの情報は、どこに書かれているのでしょうか？

編集画面には何も書かれていなかった…

すべてはテンプレートファイルに書かれている

なぜ、「会社概要」ページの内容が空っぽなのか。そのカラクリはいくつかありますが、典型的な例は「すべてテンプレートの中に書いてある」です。

この会社概要ページのURLが「http://example.com/company」だったとすれば、このページの内容は「page-company.php」というテンプレートファイルに記述されているかもしれません。

「外観」-「テーマ編集」メニューで「page-company.php」というテンプレートを開いてみましょう。

その中に会社概要など、固定ページの内容がすべて書いてある場合があります。

固定ページの内容がすべてテンプレートの中に書いてある

この手法が良いか悪いかは別にして、サイト制作の定番パターンとして知っておくべきでしょう。

もしも、そのサイトが納品直後で「これじゃあ、自分で修正できない！」と思った方は、すぐに制作者に相談すべきです。というのは、「テーマ編集」メニューは編集画面の「ビジュアルエディタ」とは違うので、内容を修正する場合はHTMLタグを含めて入力していく必要があります。

また、テンプレートはPHPファイルです。うっかりPHPのコードを壊してしまうと、とても怖いことになる場合があります！

HTMLタグの入力に慣れている方で「このpage-company.phpというファイルの文字を直せば固定ページに反映されるのでは？」がピンときた方は、その修正方法で大丈夫か、制作者に確認しましょう。

納品後に制作者と連絡がとれなくなった場合はWordPress個別サポートにご相談ください。どの固定ページが、どのテンプレートファイルに書かれているか、制作者に代わって説明します。

まとめ

「WordPressは簡単」だからといって「WordPressで作ってもらえば修正も簡単」だと勝手に判断してはいけません。これから発注する場合は「簡単に修正できますか？」と確認した方が安全です。「簡単に修正できるサイト」の仕上がりは制作者によって異なるからです。

また、サイトが納品された後も「きれいなデザインで満足！」と安心せずに、編集画面から固定ページをメンテナンスできるのか、確認する必要があります。すべてのサイトに当てはまる事例ではありませんが、「編集画面から固定ページを変更できないのですが！」は、WordPress個別サポートに定期的に持ち込まれる相談です。参考にしてください。

BizVektor Global EditionにBizVektorの子テーマのサンプルでダウンロードした子テーマのたたき台をインストールすると、次のようにエラーメッセージが表示されるかもしれません。

BizVektorの子テーマのインストールでエラーになる

これはBizVektor Global Editionのフォルダ名が子テーマの指定と異なるためです。

• 子テーマの指定 --- biz-vektor
• 実際のフォルダ --- bizvektor-global-edition

対応は簡単で、有効化に失敗した子テーマのstyle.cssを開き、次の「Template」の行を修正するだけです。

@charset "utf-8";
/*
Theme Name: ★BizVektor子テーマサンプル★
Theme URI: http://bizvektor.com
Template: biz-vektor
Description: 
Author: ★あなた ｍ９っ・ｗ・）ｂ★
Tags: 
Version: 0.1.0
*/

修正後は次のようになります。

@charset "utf-8";
/*
Theme Name: ★BizVektor子テーマサンプル★
Theme URI: http://bizvektor.com
Template: bizvektor-global-edition
Description: 
Author: ★あなた ｍ９っ・ｗ・）ｂ★
Tags: 
Version: 0.1.0
*/

「外観」-「テーマ編集」メニューから修正する場合は、画面右上の「編集するテーマを選択」から「BizVektor子テーマ」を選んで「選択」ボタンをクリックします。

BizVektorの子テーマを選択

「このテーマは壊れています。」と表示されますが、気にする必要はありません。

このメッセージは気にしなくて大丈夫

編集画面に表示されたコードから「Template」の「biz-vektor」を「bizvektor-global-edition」に修正しましょう。

BizVektorのフォルダ設定を修正

「ファイルを更新」ボタンをクリックすると、「このテーマは壊れています。」のメッセージが消えるはずです。

エラーメッセージが消える

これでBizVektorの子テーマが使用可能になったので、「外観」-「テーマ」メニューを開いて、子テーマを有効化しましょう。

BizVektorの子テーマを有効化

BizVektorの子テーマが有効化されます。

BizVektor（Global Edition）の子テーマが有効に

あとは自由にカスタマイズしていけば大丈夫です。

最近のテーマや問い合わせフォームのプラグインでは多くがレスポンシブ対応でしょうから心配ないかもしれませんが、問題は自作のフォームです。

tableタグの中にフォーム要素をレイアウトして自力で問い合わせフォームを作る場合もあります。たとえば、次のようなタグです。

<form>
 <table>
  <tr>
   <th>お名前</td>
   <td><input type="text" name="uname"></td>
  </tr>
  <tr>
   <th>メールアドレス</td>
   <td><input type="text" name="from"></td>
  </tr>
  <tr>
   <th>タイトル</td>
   <td><input type="text" name="title"></td>
  </tr>
  <tr>
   <th>メッセージ</td>
   <td><textarea rows="5" name="naiyou"></textarea></td>
  </tr>
  <tr>
   <td colspan="2"><input type="submit" value="内容を確認"></td>
  </tr>
 </table>
</form>

言うまでもなく、PC画面で見た場合は問題ありません。

PC画面で表示した問い合わせフォーム

レスポンシブではないテーマでスマホ表示すると、次のように右端が切れるかもしれません。

スマホで見るとフォームの右端が切れる

抜本的にレスポンシブ対応するには、じっくり検討する必要がありますが、最も単純な“スマホ対応”は、テーブルの幅を画面いっぱいにする方法です。

table {
    width: 100%;
}

これで問い合わせフォームは画面に収まりますが、幅が狭く入力しづらいかもしれません。

フォームを画面幅におさめる“スマホ対応”

そんなときは横に並んだテーブルのセルをバラバラにして単純に上から下に表示する方法があります。たとえば、次のようなイメージです。

各セルを上から下に表示する

このように表示するには、テーブルの各セルをテーブル形式のレイアウトではなくブロックとして表示します。

たとえば、次のようなCSSを使います。

@media (max-width: 480px) {
    table {
        width: 100%;
    }

    table th,
    table td {
        display: block;
    }
}

これにより、tableタグで作成したテーブルが表形式ではなくブロックとしてバラバラになり、上記の図のように上から下に表示されます。

inputタグやtextareaタグを使ってフォームを作成するときにsize属性やcols属性を使ってサイズ調整をすると、うまくいかない場合があります。たとえば、次のようなタグでフォームを作成したとします。

<form>
 <table>
  <tr>
   <th>お名前</td>
   <td><input type="text" name="uname" size="20"></td>
  </tr>
  <tr>
   <th>メールアドレス</td>
   <td><input type="text" name="from" size="30"></td>
  </tr>
  <tr>
   <th>タイトル</td>
   <td><input type="text" name="title" size="40"></td>
  </tr>
  <tr>
   <th>メッセージ</td>
   <td><textarea rows="5" cols="40" name="naiyou"></textarea></td>
  </tr>
  <tr>
   <td colspan="2"><input type="submit" value="内容を確認"></td>
  </tr>
 </table>
</form>

作成したフォームをGoogle Chromeで表示してみると問題ありません。

Google Chromeでは問題なく表示される

ところが、FireFoxで表示すると次のようにテキストボックスやテキストエリアがサイドバーに重なってしまいます。

FireFoxで見るとフォーム要素がサイドバーに重なってしまう

ちなみにInternet Explorerでもうまく表示できません。

Internet Explorerでも表示がおかしい

原因はブラウザによって「size="40"」や「cols="40"」の幅が異なることです。

対処は簡単で、inputタグやtextareaタグで幅のサイズ調整はsize属性やcols属性を使わずにCSSで制御することです。

「すでにsize属性やcols属性を使ってデザインを完成してしまいましたが？！」という場合でも大丈夫です。HTMLの属性よりCSSの方が優先度が高くなるので、これから記述してもCSSが優先されるはずです。

size属性やcols属性を使ったHTMLタグは修正しなくても大丈夫です。

以下は、テキストボックスとテキストエリアの幅を画面いっぱい（width: 100%;）に調整する例です。

input[type="text"],
textarea {
    width: 100%;
}

表示結果は次のようになります。FireFoxでも問題なく表示されます。

FireFoxでもフォームが問題なく表示される

すべてのフォーム要素を同じ幅にしたくない場合は次のようにサイズごとにスタイルを適用することもできます。

input[type="text"][size="20"] {
    width: 170px;
}

input[type="text"][size="30"] {
    width: 250px;
}

input[type="text"][size="40"] {
    width: 300px;
}

サイズごとに別々のサイズに調整されます。

テキストボックスのサイズごとに別々の幅に調整する

ホームページに表を入れることもありますが、次のような横長の表になることもあります。PCでは普通に表示されるので違和感はないかもしれませんが、問題はスマホ表示です。

よくある横長の表（PCでは問題ない）

参考までに、使用したHTMLは次のとおりです。

<table id="table01">
    <tbody>
        <tr>
            <th>コース名</th>
            <th>開催日</th>
            <th>時間</th>
            <th>基本料金</th>
            <th>担当講師</th>
            <th>教室</th>
        </tr>
        <tr>
            <td>ホームページ作成講座</td>
            <td>月曜日～金曜日</td>
            <td>3時間</td>
            <td>6,000円</td>
            <td>西沢直木</td>
            <td>新宿</td>
        </tr>
        <tr>
            <td>SEO講座</td>
            <td>土曜日・日曜日</td>
            <td>1時間</td>
            <td>8,000円</td>
            <td>鈴木一郎</td>
            <td>渋谷</td>
        </tr>
        <tr>
            <td>ロゴデザイン講座</td>
            <td>月曜日～金曜日</td>
            <td>1時間</td>
            <td>4,000円</td>
            <td>高橋花子</td>
            <td>新宿</td>
        </tr>
    </tbody>
</table>

ある程度できた段階でスマホ表示を確認して「右端が切れている！」と気づくこともあります。ここでは、横長の表をスマホでもうまく表示するヒントをいくつか紹介します。

対策0：表の最大幅を画面いっぱいに制限する

対策を紹介する前に確認です。場合によっては「横長の表がスマホでも問題なく表示されていますが？」という方がいると思います。たとえば、こんな感じです。

横長の表がスマホでも全体が表示される

表（table）の幅が「100%」に設定されているテーマでは、特別にスマホ対応をしなくても横長の表が自動的にスマホ画面に収まるように表示されることもあります。

ただし、セル幅が縮小されて上記の画像のように内容が折り返されて見づらくなる場合があるので、この「自動スマホ対応」（レスポンシブ対応）で大丈夫かどうかは要検討です。

対策1：スクロールバーを表示する

横長の表の単純な対策としてスクロールバーを表示すれば、スマホで表示したときに切れてしまう部分をスクロールして見てもらうことができます。

スクロールバーを表示するには、tableタグをdivタグで囲みます。

<div class="table-scroll">
<table id="table01">
…略…
</table>
</div>

そのdivタグに対して横スクロールバー（overflow-x: scroll;）を表示します。幅が狭くなったときだけで十分なので「@media (max-width: 640px)」を設定しています。これで、幅が640pxになるまで横スクロールバーが表示されます。

/* テーブルに横スクロールバーを表示 */
@media (max-width: 640px) {
    .table-scroll {
        overflow-x: scroll;
    }
}

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

横スクロールバーを表示

対策2：表から不要な列を消す

PC用に作成した表の全項目をスマホで表示する必要がなければ、不要な列を消してスマホの幅に収める方法があります。以下、CSSの例です。

/* 不要な列を消す */
@media (max-width: 640px) {
    #table01 th:nth-child(2),
    #table01 td:nth-child(2) {
        display: none;
    }

    #table01 th:nth-child(4),
    #table01 td:nth-child(4) {
        display: none;
    }

    #table01 th:nth-child(5),
    #table01 td:nth-child(5) {
        display: none;
    }
}

「nth-child(2)」は「2番目の子要素」という意味です。「td:nth-child(2)」で「2番目の子要素になっているセル」となりますが簡単に言えば「2番目の列」のことです。この例では「開催日」が消えます。

同じように「td:nth-child(4)」「td:nth-child(5)」で4番目の「基本料金」、5番目の「担当講師」が消えます。

また、データセルだけでなく見出しも消す必要があるので「th」に対しても同じようにセレクタを指定して消しています。

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

不要な列を消してコンパクトな表に

PCとスマホで表の内容が違ってしまいますが、「コース名」のセルをクリックして詳細ページを見てもらうなど工夫をすれば違和感はないと思います。

対策3：セルをバラバラにして上から下に表示する

スマホ表示の典型的なパターンは「横並びを解除して上から下に表示する」です。横長の表も同じように、表形式のセルをバラバラにして1つずつ上から下に表示すれば、スマホでもすべての内容を表示することができます。

それには、次のようなCSSを記述します。

• 各セルをブロックとして表示（上から下に表示） --- 「display: block;」を使う
• 見出し行（th）を消す
• 各セルに見出しを付加する --- 「:before擬似要素」を使う

ポイントは「見出し」です。横長の表では最初の行が見出しになっていますが、単純にセルをバラバラにしただけでは、見出しだけが最初に展開され、データセルには見出しがないので内容を理解しづらくなります。

横長の表を単純に上から下に表示してもダメかも

そこで、見出し行を消して、その代わりにデータセルの前（:before擬似要素）に見出しを付加するという力業が必要になります。

対処したCSSの例を紹介します。

/* セルをバラして上から下に表示 */
@media (max-width: 640px) {
    /* 見出し行を消す */
    #table01 th {
        display: none;
    }

    /* セルをブロックとして表示 */
    #table01 td {
        display: block;
    }

    /* 最初の項目に背景色を付ける */
    #table01 td:nth-child(1) {
        margin-top:20px;
        background-color: silver;
    }

    /* セルに見出し代わりの文字を付加 */
    #table01 td:nth-child(2):before {
        content: '開催日：';
    }

    #table01 td:nth-child(3):before {
        content: '時間：';
    }

    #table01 td:nth-child(4):before {
        content: '基本料金：';
    }

    #table01 td:nth-child(5):before {
        content: '担当講師：';
    }

    #table01 td:nth-child(6):before {
        content: '教室：';
    }
}

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

表をバラバラにして上から下に表示

まとめ

横長の表をスマホでうまく表示するヒントをいくつか紹介しました。作成した表の用途や項目の重要性などによって、どのように取り扱うのが良いかは異なります。この記事で紹介しなかったパターンも含めて、いろいろと試行錯誤してみてください。

さくらインターネットでWordPressのインストールなどを行うにはコントロールパネルにログインする必要があります。

さくらインターネットのコントロールパネル

たまにログインできずに困ってしまう方がいるようなので、ログイン方法を簡単にまとめておきます。

さくらインターネットのコントロールパネルのログイン情報

コントロールパネルのURLやパスワードなどの情報はさくらインターネットの契約時に送られてきた「[さくらのレンタルサーバ] 仮登録完了のお知らせ」というメールに記載されています。

契約直後に送られてくる「お申込受付完了のお知らせ [ユーザー名]」というメールではないので注意してください。

さくらインターネットのコントロールパネルのログイン情報

記載されたURL（https://secure.sakura.ad.jp/rscontrol/）にアクセスしましょう。

「会員メニュー」のログイン画面と間違えないように注意

まぎらわしいですが、さくらインターネットには「会員メニュー」のログイン画面もあります。コントロールパネルのログイン画面と間違えないようにしましょう。

会員メニューのログイン画面

会員メニューからコントロールパネルに移動することもできますが、何度かクリックが必要なので、コントロールパネルに用事がある場合は上記のメールに書かれているURL（https://secure.sakura.ad.jp/rscontrol/）にアクセスした方が早いです。

コントロールパネルにログインする

メールに記載されたドメイン名とパスワードを入力して「送信する」ボタンをクリックしてログインしましょう。

さくらインターネットのコントロールパネルにログインする

コントロールパネルが表示されます。

コントロールパネルが表示される

後は、自由に作業してください。WordPressをインストールする場合は以下のページも参考にしてください。

さくらインターネットでWordPressをインストールする

「ドメイン名」について

「ドメイン名」が紛らわしいようなのでまとめておきます。

• 「ドメイン名」は契約時に決めた「初期ドメイン」（例：ユーザー名.sakura.ne.jp）のことです。
• 後から追加した独自ドメイン（例：example.com）でもログインできます。パスワードは同じです。
• 「ドメイン名」は「会員ID」ではありません。ご注意ください。

納品されたホームページをチェックしていると施工不良が見つかることもあります。見た目でわかる不具合であれば「ここがおかしい！」と指摘できるはずですが、問題は「見えない部分の施工不良」です。

まさに今話題になっているマンションの施工不良と同じように

• 見えない部分の施工不良は気づきにくい
• 忘れたころに問題が起きて大騒ぎになる

という構造です。

その典型的な例が「テストサイトのURLが残っている！」です。

画像のURLがテストサイトのままになっている

納品後のサイトのチェックはどうしても、画像は正しく表示されているか、レイアウトは崩れていないかなど、画面に見えている部分が中心になってしまいます。では、その画像のURLがテストサイトのままになっていないかチェックしていますか？

たとえば、ある記事をチェックしたとします。記事で使っている画像も正しく表示されているので特に問題がないように見えるかもしれません。

画像も含めて問題なく表示される記事

記事で使われている画像のURLをチェックしてみましょう。ブラウザで画像を右クリックして次のメニューを使うとURLを調べることができます。

• FireFox --- 「画像だけを表示」メニュー
• Google Chrome --- 「新しいタブで画像を開く」メニュー
• Internet Explorer --- 「プロパティ」メニュー
• Safari --- 「イメージを新規タブで開く」メニュー

次のように表示中のページが独自ドメイン（例：http://example.com/）なのに、画像のURLがテストサイト（例：http://ユーザー名.sakura.ne.jp/）になっていませんか？

記事に含まれる画像のURLがテストサイトのままになっている

もしもテストサイトのアドレスが残っていた場合は、立派な施工不良です。

「確かに画像のURLはテストサイトのままですが、特に問題は起きていませんが」と思った方へ。マンションの施工不良の例を思い出してください。

施工不良があったとしても、

• 完成直後は問題が起きないかもしれない
• 忘れたころに大問題が噴出するかもしれない

ということです。

ホームページの「テストサイトのURLが残っている」問題も同じです。完成直後は目に見える問題は起きないかもしれませんが、忘れたころに何かが起きるかもしれません。

「何も問題が起きないかもしれない」という点も、マンションの施工不良と同じです。マンションとかホームページという限られた世界の問題ではなく、世の中のあらゆる問題に当てはまる考え方かもしれません。

「たとえ潜在的な問題があったとしても、すぐには顕在化しない。場合によっては最後まで何も問題が表面化しないかもしれない」ということです。

忘れたころに何が起きるのか？

完成直後は問題が起きないかもしれません。画像はテストサイトを参照しているので表示には問題なく、URLが古いままでも「見た目」は違和感がないからです。

では、忘れたころに、どのような問題が起きるのでしょうか。

そもそも、画像をテストサイトのURLから読み込んでも問題が起きないのは、テストサイトのURLが有効だからです。テストサイトを消してしまった場合や、サーバー業者を移転した場合、問題が表面化します。

テストサイトのURLを参照したままでは、画像が表示されなくなります。その時点で「画像が全部消えた！」と大騒ぎになるかもしれません。

テストサイトを削除すると「画像が消える」

URLを直せば解決できるはずだが…

画像が消えたように見えても実際はテストサイトを消しただけなので、本稼働サイトに画像が正しくアップロードされていれば騒ぐ必要はありません。記事に含まれるテストサイトのURL「http://ユーザー名.sakura.ne.jp/」を独自ドメイン「http://example.com/」に変更すれば、正しく画像が表示されるようになるはずです。

テストサイトから本番サイトに画像をアップロードしていなかった場合は…それは大騒ぎになるでしょうね。残念ながら…

ですから、問題が表面化する前に、こうした目に見えない部分の施工不良もチェックが必要なのです。「画像のURLが古い！」は象徴的な問題です。

見える部分の施工不良もチェックが必要です

今回は「目に見えない部分の施工不良」を取り上げましたが、言うまでもなく「目に見える部分」の施工不良もチェックが必要です。

たとえば、次のような部分です。

• 「WordPressアドレス」と「サイトアドレス」のドメインが違っていないか（URLは違うこともあるので注意）
• ブログ記事が正しく表示されるか（アーカイブと個別記事）
• 固定ページは編集画面からメンテナンスできるか
• ヘッダー画像は「外観」-「ヘッダー」から変更できるか
• グローバルメニューを「外観」-「メニュー」から変更できるか
• グローバルメニューの項目は自由に増やせるか（画像で固定されていないか）
• サイドバーを「外観」-「ウィジェット」でメンテナンスできるか
• ページのURLに「?」が付いていないか
• ページのURLが日本語になっていないか（例：http://example.com/会社概要）
• ログイン中のユーザー（自分のこと）の権限は「管理者」になっているか
• WP Multibyte Patchプラグインが有効化され最新版にアップデートされているか
• 「設定」‐「表示設定」で「検索エンジンがサイトをインデックスしないようにする」にチェックが入っていないか
• 「投稿」‐「カテゴリー」メニューに「未分類」カテゴリーが残っていないか
• テスト投稿「Hello world!」やテストページ「サンプルページ」が残っていないか

必ずしもすべてが施工不良の例ではありませんが、作成したいサイトの性格に応じてチェックしてください。

今回は趣旨が違うので詳しい説明はしませんが、納品されたサイトについて施工不良が気になる方はWordPress個別サポートで一緒にチェックさせていただきます。1時間くらいです。

まとめ

このようにホームページにもマンションと同じように「見えない部分の施工不良」が存在する場合があります。「画像のURL」は典型的な例です。業者によっては、このような問題が起きないように画像URLを相対パスにするなど工夫して制作してくれている場合もありますが、納品を受ける側としては油断は禁物です。正しく施工されているかは外側から見ても判断できません。簡単にチェックできるので、一度、画像のURLをチェックしてみましょう。

WordPress個別サポートのお客様からもよく聞くセリフです。

サイトの画面が真っ白に！

いくつかの原因がありますが、ここでは典型的な原因と対処方法を紹介します。合言葉は「画面が真っ白になったらFatal errorを探せ！」です。

「Fatal error」とは何なのか、今は考えなくても大丈夫です。

画面が真っ白ではなく「データベース接続確立エラー」とだけ表示されている場合は以下のページも参考にしてください。

WordPressで「データベース接続確立エラー」と表示されるとき

画面が真っ白になる原因

画面が真っ白になった方は急いで対策を探していることとは思いますが、少し回り道をして、画面が真っ白になる仕組みから説明します。

WordPressで画面が真っ白になるのは、表示中のページの裏で動いているプログラムに問題があるからです。「このページには問題があるため、これ以降は処理を続けられません！」となって画面が真っ白になるのです。

画面が真っ白になるのは画面のプログラムに問題があるため

といっても、昨日まで問題なく動いていたWordPressシステムやテーマが急に暴発することはありません。ほとんどの場合、

• 最近インストールしたプラグイン
• さっき修正したテーマのPHP（特にfunctions.php）
• WordPressアドレスの修正ミス

が原因になっています。

ですから、画面が真っ白になったときは「最近インストールしたプラグインが問題かも」とか「さっき修正したfunctions.phpのせいかも」と仮説を立てて対処していくのが良いです。

画面が真っ白になるとすぐに「WordPressの再インストールが必要？」のように極端な対策に意識を向ける方がいますが、ほとんどの問題の原因は追加したプラグインや修正したファイルにしかありません。あらぬ方向に意識を向けず、最近行った作業を振り返って問題の原因を探してください。

本当は画面は真っ白ではない？！

問題の原因を探すキーワードは「画面が真っ白になったらFatal errorを探せ！」です。

とはいえ、真っ白画面のどこから「Fatal error」とやらを探すのか疑問だと思いますが、実は、「画面は真っ白ではない」のです。

本当は真っ白ではなく、次のようなエラーメッセージを表示できるのです。

本当は画面は真っ白ではない

みなさんが大騒ぎする真っ白な画面は、表示できるエラーメッセージを非表示にしているため、真っ白に見えているだけなのです。

エラーメッセージを表示しないと、文字通りに画面が真っ白に

エラーメッセージが表示されないのは不具合ではなく、ハッカーなどに不要な情報を与えないためのセキュリティ対策の一環だと思ってください。

エラーメッセージには不特定多数のユーザーに見せる必要のない情報が含まれている場合があるので、サイトを稼働させる環境（いわゆる本番環境）では非表示にするのが一般的です。

話が長くなりましたが、そのような理由で一般的なレンタルサーバーではWordPressサイトで問題が発生してもエラーメッセージは表示されません。そのため、いろいろな問題が起きても「完全に画面が真っ白！」となるのです。

消えたエラーメッセージを表示する設定

非表示になっているエラーメッセージを表示して「Fatal error」を探しましょう。それには、WordPressの設定ファイル（wp-config.php）を修正します。

WordPressインストール先のフォルダにある設定ファイル（wp-config.php）を開いて、次のコードを探してください。

define('WP_DEBUG', false);

初期設定では「WP_DEBUG」（エラーメッセージの表示）が「false」（しない）に設定されているので、「false」を「true」（表示する）に変更します。

define('WP_DEBUG', true);

これで、画面が真っ白になったページを開くとエラーメッセージが表示されるはずです。

エラーメッセージが表示される

膨大なエラーメッセージ、最後の1行に注目！

さて、表示されたエラーメッセージを見て逆に不安になったかもしれません。場合によっては想像以上に膨大なエラーメッセージが表示されるからです。

でも大丈夫です。落ち着いてください。この記事のテーマは「Fatal errorを探せ！」です。その「Fatal error」は最後の行あたりに表示されているはずです。

間違っても、一番上の行から1つずつ解読しようと思わないでください。PHPの勉強にはなりますが。

エラーメッセージが膨大に表示されるのは、小さい問題から大きな問題まですべてのメッセージが表示されるためです。

ほとんどは単なる「注意」で、イエローカード的なエラーメッセージです。画面が真っ白になるほど深刻ではありません。

一発で画面が真っ白になる「レッドカード級のエラーメッセージ」は一番最後に表示された「Fatal error」です。

「画面が真っ白」の原因は最後の「Fatal error」

「Fatal error」を訳すと「致命的なエラー」です。処理を続けられないほど重大なエラーが発生したため、そこで処理を停止するという意味です。

つまり、「Fatal error」以降は何も表示できないので、最後に表示された「Fatal error」を見れば問題の最大の原因が特定できるということです。

「フォルダごと削除」でひとまず問題解決！

「Fatal error」の後に「Call to undefined function」（未定義の関数を呼び出した）などのメッセージが表示されますが、深追いは禁物です。エラーメッセージの解釈には相当なPHPの経験が必要だからです。

ここではPHPの経験がなくても大丈夫なように、エラーメッセージを解釈せずに問題を解決する方法を紹介します。

「Fatal error」のエラーメッセージを見ていくと最後の方に、エラーの原因になったファイル名（フォルダ名も）が書いてあります。

エラーの原因になったファイル名がココに

おおざっぱに言えば、次のような構成の「フォルダ名＋ファイル名」が表示されます。表示された内容から、エラーの原因がテーマなのかプラグインなのか特定しましょう。

• プラグインが原因の場合：wp-content/plugins/プラグイン名/問題の起きたファイル名
• テーマが原因の場合：wp-content/themes/テーマ名/問題が起きたファイル名

上記の例では、pluginsフォルダのsample-plugin-abcフォルダにあるgallary.phpが原因です。この部分からsample-plugin-abcプラグインが問題の原因だとわかります。

テーマやプラグインが原因になっていることが特定できたら、対処は簡単です。

問題の原因になったテーマまたはプラグインをフォルダごと削除すれば解決です。

もちろん、エラーメッセージに示されたファイルを開いて問題のコードを修正できればベストですが、難しいでしょうから、テーマやプラグインのフォルダを丸ごと削除するのが簡単です。

この例でも、問題が起きたプラグインのsample-plugin-abcフォルダを削除すれば問題はほぼ解決するはずです。削除するのはpluginsフォルダではなく、その中にある個別のプラグインのフォルダです。念のため。

問題の原因になっているプラグインをフォルダごと削除

まとめ

以上、簡単にですがWordPressで画面が真っ白になったときの対処方法を紹介してきました。まずは、wp-config.phpで「define('WP_DEBUG', true);」に設定してエラーメッセージから「Fatal error」を探しましょう。エラーの原因がテーマなのか、プラグインなのか、それ以外なのか特定することができます。

エラーの原因がプラグインやテーマだった場合、コード修正が難しければフォルダごとテーマやプラグインを削除して、とりあえず「画面が真っ白」の状態から脱出しましょう。

どうしてもうまくいかない場合は「Fatal error」のエラーメッセージをメモしてWordPress個別サポートにご相談ください。

BizVektorの拡張デザインスキン「BizVektor Vast」は画面最上部に表示されるグローバルメニューが特徴的です。

BizVektor Vastのグローバルメニュー

このグローバルメニューを透過（半透明に）したり、スクロール時に色を変える方法を紹介します。サンプルサイトはこちらです。

谷根千散歩.com

通常のグローバルメニューの色

BizVektor Vastのグローバルメニューの色は「外観」-「カスタマイズ」メニューの「Vast 設定」-「メニュー背景色」で設定できます。

メニュー背景色の設定

選択した色がグローバルメニューに反映されます。

選択した色がグローバルメニューに反映される

グローバルメニューの背景を透過させる

グローバルメニューの背景を透過させて半透明にしたい場合は、次のようなCSSを「外観」-「CSSカスタマイズ」メニューまたは子テーマのstyle.cssに入力します。

/* グローバルメニューの背景を透過 */
#header {
    opacity: 0.7;
}

グローバルメニューが半透明になって背景が透けます。

グローバルメニューを半透明に

スクロールが始まってから半透明にする

上記のように常に半透明にせず、最初は不透明の状態でスクロールが始まってから半透明にする場合は、上記のCSSを削除してベタ塗りの状態に戻して、代わりに次のようなPHPを子テーマのfunctions.phpに入力します。

/* スクロール時に背景を透過 */
function my_wp_footer(){ 
?>
<script>
jQuery(function() {
    var header = jQuery('#header');
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 0) {
            header.css('opacity', '0.6');
        } else {
            header.css('opacity', '1');
        }
    });
});
</script>
<?php
}
add_action('wp_footer', 'my_wp_footer');

最初はグローバルメニューに背景色がそのまま設定されますが、下にスクロールすると透過されます。

スクロール時のみ背景を透過

ある程度スクロールしてから透過させる

上記のPHPでハイライトした行の「0」を好きな数字（サイズ：px）に変更すれば、「ある程度スクロールしてから」透過させることができます。例を以下に紹介します。

/* スクロール時に背景色を透過 */
function my_wp_footer(){ 
?>
<script>
jQuery(function() {
    var header = jQuery('#header');
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 400) {
            header.css('opacity', '0.6');
        } else {
            header.css('opacity', '1');
        }
    });
});
</script>
<?php
}
add_action('wp_footer', 'my_wp_footer');

スクロール時にグローバルメニューの背景色を変更する

スクロール時に透過させるだけでなく背景色も変えたい場合は、上記のPHPをfunctions.phpから削除して、代わりに次のPHPをfunctions.phpに入力します。スクロール時のグローバルメニューにclass名を付加するコードです。

/* スクロール時のヘッダーclass名を制御 */
function my_wp_footer(){ 
?>
<script>
jQuery(function() {
    var header = jQuery('#header');
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 0) {
            header.addClass('header-extra-css');
        } else {
            header.removeClass('header-extra-css');
        }
    });
});
</script>
<?php
}
add_action('wp_footer', 'my_wp_footer');

あとは、「header-extra-css」というclassに好きなスタイルを定義すれば、スクロール時に反映されます。CSSの例を紹介します。

/* スクロール時のグローバルメニュースタイル */
#header.header-extra-css {
    background-color: #f0908d;
    opacity: 0.7;
}

これで、スクロール時にグローバルメニューの背景色が切り替わり、半透明にもなります。

スクロール時のみメニュー背景色を変更する

多くの方が自分のサイトや顧客サイトの検索順位チェックをしていると思いますが、
今の順位だけ見て喜んだり悲しんだりしてませんか？

もちろん、今の順位も重要ですが、過去と比べた順位の「変動」も重要です。

今の順位だけでなく「変動」を把握することも重要

同じ検索順位でも「変動」で対策が異なる

仮に、ある検索キーワードで検索順位が3位だったとしたら、
「やった！3位だ！」と喜んで良いのでしょうか？

今の検索順位だけ見て喜んでいて大丈夫？

というのは、同じ「3位」でも

• 昨日まで15位だったのに急に順位が上がって3位になった（もうすぐ1位に？）
• 長い間1位だったのに突然、順位が下がって3位に落ちた（このままズルズルと…）

の2つでは状況が全く違います。

その後の対策も違うのは言うまでもありません。

• 徐々に順位を上げての3位 → そのまま様子をみてみよう（方向性は間違っていない）
• 徐々に順位を下げての3位 → まずい！別の対策が必要？！（対策が間違ってる？）

3位に限らず10位でも15位でも同じです。「前は何位だった？」によって対応は違います。

検索順位の変動を把握することが重要

そんなわけで、検索順位は変化を把握することが重要です。

具体的には、あるサイトの、あるキーワード（できれば複数）について毎日の検索順位を記録することになりますが、手作業では面倒ですよね。

毎日、Excelに検索キーワードと順位を記録していくのかと思うと…

手作業で検索順位を記録するのは面倒

この方法では途中で挫折するかもしれませんね。
挫折して記録を止めたとたんに検索順位が下がっていたりしたら…

検索順位を一括でチェックできるツール「GRC」

サイトの検索順位をチェックするには「検索順位チェックツールGRC」が便利です。
調べたいサイトと検索キーワードを登録して「順位チェック実行」ボタンをクリックすれば、自動でチェックしてくれます。

検索順位の変動をチェックできるツール「GRC」

複数のキーワードについて一括でチェックでき、過去の履歴が保存されるので、急激な順位低下も（もちろん順位上昇も）素早く検知できます。

徐々に順位を下げての11位だったとすれば、何らかの対策が必要だとわかりますし、昨日まで3位だったのに突然、50位くらいに飛んでしまってもすぐに検知できます。

突然の順位変動も素早くキャッチ！

直接的に検索順位を上げるツールではありませんが、サイトの状況を把握して対策の方向性を検討するのに欠かせないツールです。

ちなみに、その検索順位にランクされたページのURLもわかるので、あるページに対して実施したSEO対策の効果が出ているのかチェックすることもできます。

早く言えばSEOするなら必須です。

この検索順位チェックツール「GRC」は無料で利用できますが、登録できるURLが3つまで、チェックできる検索キーワードが20個までという制限があります。

さらに徹底的にチェックしたい場合、ライセンスを購入することで、検索キーワードを300個まで登録（パーソナルライセンス）したり、サイトやキーワードを無制限で登録（ビジネスライセンス）できるようになります。

まだ使っていない方は、今日から検索順位の変動をチェックし始めましょう。

検索順位チェックツール「GRC」のダウンロード・ライセンス購入はこちらから