ご存じかもしれませんが、WordPress 4.7では「カスタムCSS」機能が追加されています。現在のサイトで修正したいCSSを入力してデザインをカスタマイズできる機能です。

一般的にCSSをカスタマイズするには、

1. 親テーマのCSSを修正する
2. 子テーマを作ってCSSを修正する
3. テーマやプラグインの「カスタムCSS」機能を使う

の3パターンがありますが、次のようなデメリットがあります。

1. 親テーマを修正するとテーマをアップデートしづらくなる
2. 子テーマ作成は面倒でうまくいかないことがある
3. カスタムCSS機能はテーマやプラグインに依存する

そんなときにWordPress 4.7で追加されたカスタムCSS機能が役立ちます。子テーマを作らなくても「外観」-「カスタマイズ」を開いて「追加CSS」メニューに任意のCSSを入力、プレビューすることができます。

WordPress 4.7のカスタムCSS機能

入力したCSSはテーマに関連づけられるため、テーマを切り替えるとカスタムCSSは空っぽになります。つまり、テーマを切り替えたときに不要なCSSが引き継がれることがありません。

テーマを切り替えるとカスタムCSSは空に

元のテーマに戻すと、入力したカスタムCSSがもう一度適用されます。

元のテーマに戻すとカスタムCSSが復活

これは、カスタムCSSを入力したときのテーマ名が記憶されているためです。テーマごとに別々のカスタムCSSを管理できるので非常に便利です。

これで、子テーマ作成の悩みも少なくなるかもしれませんね。少なくともCSSを直したいだけなら子テーマを作らなくてもカスタムCSS機能だけで実現できます。

ただし、テーマのPHPを修正したい場合は子テーマ作成を検討する必要があります。念のため。

また、子テーマを作った場合、親テーマの「カスタムCSS」は引き継がれないので注意が必要です。子テーマを有効化する前にコピーしておく必要がありますね。

WordPressをSSLにしたいけど料金が高い。共用SSLでは少し不安。そんなことを思っている方、エックスサーバーでは独自SSLが無料で使えます。

2016年の6月から独自SSLの無料提供が始まっていたのですね。気づきませんでした。ということでエックスサーバーユーザーで、まだSSLを導入していない方はご一考を。今さらの話題で申し訳ありませんが。

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

全サーバープランで独自SSLが無料・無制限に利用可能に！「独自SSL」機能の強化のお知らせ

「独自SSLが無料で使えるなら引っ越そう！」

そんなことを思った方、これを機にエックスサーバーへの乗り換えもおすすめします。

10日間無料で試用できるので、現在のサーバーのスピードなどに不満を感じている方は一度お試しください。

ちなみに、独自ドメインでSSLを有効にしたら、WordPressでSSL設定を行う必要があります。

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

WordPressをSSL化する手順まとめ

さっそく私もエックスサーバーで運営しているサイトに無料SSLを適用してみました。今のところ問題ありません。速度が遅くなったということもないようです。

WordPress 4.7の標準テーマTwenty Seventeenではトップページに任意の固定ページを差し込めるフロントページセクションがあります。「外観」-「カスタマイズ」-「テーマオプション」メニューです。

固定ページを差し込めるTwenty Seventeenのフロントページセクション

初期設定では4ページまで挿入可能になっていますが、twentyseventeen_front_page_sectionsフックをカスタマイズすることで、増やしたり減らしたりすることができます。たとえば、次のようなコードを子テーマのfunctions.phpなどに入力します。

/* フロントページセクションの数を設定 */
function my_front_page_sections() {
    return 6;
}
add_filter('twentyseventeen_front_page_sections', 'my_front_page_sections');

この例では「6」に設定しているのでフロントページセクションは6つになります。

フロントページセクションの数が増える

あとはアイデア次第。用途に応じてフロントページセクションの数を設定してみてください。

WordPressのバージョン4.7.0および4.7.1は危険なバージョンです。お使いの場合は今すぐWordPress 4.7.2などにアップデートしてください。

アップデートしないと、サイトが改ざんされる恐れがあります。

認証なしでコンテンツを改ざん可能な重大な脆弱性です。パスワードが漏洩しなくてもサイトが改ざんされる可能性があります。必ずアップデートしてください。

詳しくは、以下のページも参考にしてください。

• WordPress 4.7.1 の権限昇格脆弱性について検証した
• WordPress 4.7.2 セキュリティリリース

Google Adsenseの広告を表示するなら、サイト内の関連記事リンクと一緒に表示した方が効果がありそうですよね。Google Adsenseの「関連コンテンツユニット」なら、そんなことができます。こんな感じでサイト内の関連記事に混じるようにGoogle Adsenseの広告が表示されます。

関連記事の中に広告が表示される

「広告」が広告で、それ以外はサイト内の関連記事のリンクです。2種類のリンクが混ざる形で表示され、別々に表示するよりクリック増が期待できます。

この関連コンテンツユニットの使い方を簡単に紹介します。

関連コンテンツユニットの使い方

Google Adsenseの新しい広告ユニットの追加画面で「関連コンテンツユニット」を選択します。

関連コンテンツユニットを選択

関連コンテンツユニットの説明が表示されるので先に進めていきます。

関連コンテンツユニットの説明を確認

広告を表示する対象サイト(1)を選択、任意の広告ユニット名(2)を入力、「保存してコードを取得」ボタン(3)をクリックすると設定完了です。

関連コンテンツユニットの設定

表示されたコードをサイトの任意の場所にコピーペーストすれば広告が配信されます。

サイトにコピーペーストする広告タグ

サイトを表示すると、サイト内の関連記事に混じる形で広告が表示されるようになります。

関連記事の中に広告が表示される

関連コンテンツユニットの表示オプション

関連コンテンツユニットには次のようなオプションを指定できます。

広告オプション

「広告で収益化」を選択すると、関連記事に混じる形で広告が表示されるようになります。オフにすると広告は表示されず関連記事のみになります。

広告を表示するか

スタイル

広告や関連記事の文字・背景色・フォントスタイルなどを設定することができます。

フォントスタイル・背景色などを設定

サイズ

通常は端末に応じて表示サイズが切り替わる「レスポンシブ」を選択しておけば大丈夫ですが「カスタム」を選択して任意のサイズに設定することもできます。

サイズの設定

以上、関連コンテンツユニットについて簡単に紹介しました。

広告と関連記事が同じフォーマットで表示されることで収益性のアップが期待できます。もちろん、関連記事がクリックされることでサイト滞在時間を長くすることも期待できるでしょうから、相乗効果が見込めます。

気になる方はお試しを！

WordPressで更新に失敗すると画面が真っ白になって焦るかもしれません。原因によっては簡単に復旧できない場合もありますが、原因になっているプラグインを削除したり、不足しているフォルダをアップロードすれば解決される場合もあります。

以下、更新に失敗したときの対策を紹介します。あくまで1つの対策にすぎませんが、トラブルが起きたときの参考にしてください。

具体的なエラーメッセージを表示する

WordPressの更新に失敗すると画面が真っ白になったり「ページは機能していません。現在このリクエストを処理できません。HTTP ERROR 500」のような漠然としたエラーメッセージが表示されます。この状態では問題を特定できないので、具体的なエラーメッセージを表示してみましょう。

更新失敗の原因を調べるため具体的なエラーメッセージを表示する

それには、設定ファイル（wp-config.php）のWP_DEBUG定数をtrueに設定します。

define('WP_DEBUG', true);

以下のページも参考にしてください。

WordPressでエラーメッセージを表示するにはWP_DEBUGでデバッグモードに

エラーメッセージから「Fatal error」を探す

表示されたエラーメッセージのうち、直接的なエラー原因を示すのは「Fatal error」（重大なエラー）です。この文字をエラーメッセージから探してみましょう。

エラーの直接的な原因を示すのは「Fatal error」

Fatal errorについては以下のページも参考にしてください。

WordPressで画面が真っ白になったら「Fatal error」を探せ！

Fatal errorが示すフォルダなどを削除する

あとは、Fatal errorの内容に従って対処すればよいのですがPHPに慣れていないとエラーメッセージの解読は難しいです。ですから、現実的な対応は、エラーメッセージを深追いせず、原因になっているプラグインやテーマファイルを削除することです。

次の例ではpluginsフォルダのsample-plugin-abcフォルダにあるgallary.phpが原因だとわかります。PHPに慣れていないとgallary.phpのエラーを修正するのは無理でしょうから、単純にこのプラグインフォルダ（sample-plugin-abcフォルダ）を消してしまうのが現実的な対応です。

エラーの原因になっているプラグインまたはテーマ

上記のようなエラーメッセージが示すプラグインの他に、最近インストールしたプラグインを疑ってみるのも1つの手です。詳しくは、以下のページも参考にしてください。

原因不明のWordPressトラブルには「最近インストールしたプラグイン」を削除！

足りないフォルダなどをアップロードする

原因のファイルを削除して解決できれば単純かもしれませんが、逆にファイルが不足している場合もあります。

たとえば、WordPressの更新途中で別の画面に移動してしまった場合です。

この場合、システムファイルのコピーが不完全な状態で終わり、新バージョンを実行できないために画面が真っ白になります。

その場合の典型的なエラーメッセージは次のようになります。

更新に失敗して「Fatal error: require(): Failed opening required …」

長いエラーメッセージを見ても意味がわからないかもしれませんが、4つのパーツに分けると次のようになります。

• Fatal error --- 重大なエラーがあります。通常はここで処理が停止して画面が真っ白になります。
• require() --- requireという命令が原因です。この命令はファイルを読み込む命令です。
• Failed opening required --- requireで指定されたファイルが読み込めませんでした。
• …/wp-includes/rest-api/endpoints/class-wp-rest-controller.php --- 読み込めなかったファイルはこれです。

つまり、必須ファイルのclass-wp-rest-controller.phpが読み込めないため、これ以降の処理を継続できず、画面が真っ白になるという仕組みです。

このエラーメッセージ「Fatal error: require(): Failed opening required 」を見たら、そのファイルが存在するかチェックしてみましょう。

この例でも実際に、wp-includes/rest-apiフォルダを開いてみると、endpointsというフォルダ自体が存在しないことがわかります。そのため、class-wp-rest-controller.phpという必須ファイルを読み込めずにFatal errorが発生したと推測できます。

フォルダが足りない（Fatal errorの原因に）

対処としては、サーバーで実行中のものと同じバージョンのWordPressをWordPress公式サイトからダウンロードして、不足しているフォルダまたはファイルをアップロードしてみる方法があります。

この例ではwp-includes/rest-apiフォルダに不足していたendpointsというフォルダをコピーしてみます。

不足していたフォルダを戻す

そのフォルダが不足していたことが原因であれば、システムエラーが解決してサイトが復旧します。

サイトが復旧する

最終手段はwp-admin・wp-includesを上書き

ここまでの手順で真っ白画面が解決しなかったり、そもそもエラーメッセージが表示できずに原因がわからない場合は力業です。ダウンロードしたWordPressパッケージに含まれるwp-adminフォルダとwp-includesフォルダをサーバーにアップロードして上書きしてみましょう。

wp-admin・wp-includesを上書き

結局、これは手動でWordPressを更新するのと同じことなので、更新が失敗したときは最初に行う手順なのかもしれませんが、、、

まとめ

WordPressの更新が失敗して画面が真っ白になると焦りますが、原因特定のために具体的なエラーメッセージを表示させたり、原因になっていると思われるプラグインやテーマを削除してみるなど、できる範囲で対処してみましょう。

よくわからなければWordPress個別サポートにご相談ください。

「特定のページ専用のウィジェット」や「投稿だけに表示するウィジェット」「管理者専用のウィジェット」「ログインしていないユーザー向けのメッセージ」など、条件に応じてウィジェット表示を切り替えたいことがあります。

そんな作業を簡単にできるのがJetpackプラグインの「ウィジェット表示管理」です。たとえば、「会社概要ページのみに表示したいウィジェット」などを簡単に設定することができます。

特定ページ専用のウィジェットを作りたい

以下、Jetpackプラグインのウィジェット表示管理について簡単に紹介します。

Jetpackのウィジェット表示管理を使用可能に

「Jetpack」‐「設定」メニューで「Appearance」タブを開きます。

「Jetpack」‐「設定」‐「Appearance」タブを開く

「ウィジェット表示管理」を有効化します。

「ウィジェット表示管理」を有効化

これで完了です。続いて、ウィジェットを設定しましょう。

ウィジェットの表示条件の設定

ウィジェットの追加

「外観」-「ウィジェット」メニューを開いて、好きなウィジェットパーツを任意のウィジェットエリアに追加します。ここではテキストウィジェットを追加しました。

テキストウィジェットを追加

表示設定画面を開く

ウィジェットの表示条件を設定するため、「公開状態」をクリックします。

「公開状態」をクリック

ウィジェットの表示／非表示の条件を設定する画面が開きます。

表示／非表示の設定画面が開く

以下、設定方法を簡単に紹介します。

ウィジェットの表示／非表示

「以下の場合に」から「表示」または「非表示」を選択できます。特定のページのみで表示したり、特定の条件で非表示にすることができます。

ウィジェットの表示／非表示を設定

表示条件の設定

下段左側のメニューからは、表示／非表示を切り替える対象のページタイプを選択することができます。具体的な設定例は後で紹介します。

表示／非表示を切り替えるページタイプ

下段右側のメニューからは、具体的なページや投稿を選択することができます。個別のページで表示を制御する場合は、こちらから選択します。

表示を制御する具体的なページを選択

「会社概要」のみで表示されるウィジェットの例

「会社概要」ページのみで表示するウィジェットの設定例は次のようになります。

このウィジェットを特定のページのみで表示する設定

「保存」ボタンをクリックすると設定完了です。

サイトを表示して確認しましょう。この例では会社概要ページのみでウィジェットが表示されます。

特定のページのみでウィジェットが表示される

表示設定のバリエーション

表示設定のパターンをいくつか紹介します。

特定のページのみでウィジェットを非表示にする

「以下の場合に」で「非表示」を選択します。

特定のページのみウィジェットを非表示にする

複数ページを表示対象にする

「会社概要またはサービス紹介のページで表示したいウィジェット」のように複数のページを表示対象、または非表示の対象にするには、条件設定メニュー右側の「追加」をクリックします。

表示条件の追加

別の条件を設定できるようになります。あとは同じように条件を組み立てましょう。

「会社概要」または「サービス紹介」で表示されるウィジェット

親子ページ共通のウィジェットを作成する

親子ページ共通のウィジェットを作成したい場合は、表示対象の固定ページで親ページを選択し、「子ページも含める」をチェックします。

親子ページ共通のウィジェットを作成する

これにより、「サービス紹介」に加えて子ページの「Excel講座」「SEO講座」「WordPress講座」で共通のウィジェットを表示することができます。

固定ページのみでウィジェットを表示する

下段のメニューを「固定ページが固定ページ（の場合）」のように組み立てます。右側のメニューで「投稿タイプ」から「固定ページ」を選択するのがポイントです。

固定ページのみで表示する

未ログインユーザー向けのメッセージ

下段のメニューで「ユーザーがログアウト中」を選択すると、ログインしていないユーザー向けのメッセージを表示することができます。ログイン画面へのリンクなどを表示すればよいでしょう。

未ログインユーザーにログインを促す

管理者のみが見られるメッセージを表示する

「権限グループ」で「Administrator」を選択すると、管理者のみが参照できるウィジェットになります。また、その他の権限を選ぶことで権限に応じてメッセージを切り替えることができます。

管理者のみに表示されるウィジェット

アーカイブページでウィジェットを表示する

アーカイブページを表示対象にするには、下段のメニューを「固定ページがアーカイブ」のように組み立てます。

アーカイブページのみで表示されるウィジェット

記事一覧（投稿トップ）でウィジェットを表示する

記事一覧（いわゆる「投稿トップ」）の固定ページを表示対象にするには、下段のメニューを「固定ページが投稿ページ」のように組み立てます。

記事一覧（投稿トップ）で表示されるウィジェット

トップページ専用のウィジェットを作成する

下段のメニューを「固定ページがフロントページ」のように組み立てると、フロントページ専用のウィジェットになります。

フロントページのみで表示されるウィジェット

まとめ

以上、Jetpackのウィジェット表示管理について簡単に紹介しました。あとはアイデア次第です。どのような条件でどのようなウィジェットを有効にしたいかイメージしてサイドバーなどを効果的に切り替えてみてください。

Shortcodes Ultimateは必携プラグインと言ってもよいかもしれません。Googleマップ、動画、マルチカラム、開閉式コンテンツなど、ページ作りに役立つさまざまな定番パーツをショートコードでページに追加できます。選べるパーツは50種類以上、こんな感じです。

Shortcodes Ultimateプラグインでページに追加できるパーツ

ボタン、文章を囲む枠線、文章のハイライト（マーカーによる強調表示）など、自作するとCSS記述で挫折するような細かい定番パーツも多く使えます。ぜひ使いこなしたいプラグインです。

以下、Shortcodes Ultimateプラグインの使い方と使用例を紹介します。

Shortcodes Ultimateの使い方

「プラグイン」‐「新規追加」メニューからShortcodes Ultimateプラグインをインストール、有効化した後、投稿や固定ページの編集画面を開くと「ショートコードを挿入」ボタンが追加されているはずです。

Shortcodes Ultimateの「ショートコードを挿入」ボタン

このボタンをクリックして、追加したいパーツを選びます。ここでは、ページに動画を埋め込むため「YouTube」を選択してみます。

追加したいパーツを選ぶ

追加するパーツについて設定します。YouTubeの場合は動画のURLを入力するだけですが、必要に応じてサイズやレスポンシブ対応させるかなどを選択できます。ちなみに、レスポンシブ対応にした場合はサイズ設定は無視されます。

表示する動画のURLを入力

設定できたら、画面を下にスクロールして「ショートコードを挿入」ボタン(1)をクリックすれば、パーツがページに追加されます。「プレビュー」ボタン(2)をクリックすると、ページに追加する前にプレビューすることができます。また、「プリセット」ボタンをクリックすると現在の設定を保存できます。後で同じ作業をするときに便利です。

ショートコードの挿入

ページにショートコードが追加されます。

ショートコードが追加される

ページをプレビューしたり公開すれば、内容を確認できます。

ページに埋め込まれた動画

以下、Shortcodes Ultimateで追加できるパーツをいくつか紹介します。

投稿（最新記事の一覧）

カテゴリーや件数などを指定して投稿を一覧表示することができます。固定ページ内で最新記事を表示したい場合などに便利です。

アイキャッチ画像付きの投稿一覧

スケジューラ（時間ごとに違う文章を表示）

時間ごとに別々の内容を表示することができます。営業時間なのか時間外なのかの表示にも使えます。

ノート（文章を枠で囲む）

重要な文章を枠で囲んで目立たせるなどの用途で使えます。色はメニューで選択できます。

ボックス（タイトルと文章を枠で囲む）

タイトル付きの枠囲みコンテンツを作りたいときに役立ちます。

ギャラリー

画像ギャラリーです。投稿の画像を表示すれば「最新記事」としても機能します。クリック時の動作やタイトルの表示／非表示も切り替えられます。

MTS Simple Booking Cで「Declaration of MTSSB_Article_Admin」エラーになるとき

これは便利！「地図・動画・枠線もショートコードで」のShortcodes Ultimateプラグイン

特定のページ専用のウィジェットを作成できる「Jetpackのウィジェット表示管理」

WordPressの更新に失敗したときの対策

関連記事に広告が混じるGoogle Adsenseの「関連コンテンツユニット」

【注意】WordPress 4.7.0および4.7.1は今すぐアップデートを！

Googleマップ

会社の所在地などに使えるGoogleマップです。レスポンシブ対応です。

[su_gmap address="東京都中央区銀座6-6-1"]

カルーセル（コンテンツが横にスライド）

複数ページが画像付きで横にスライドするコンテンツカルーセルです。

BizVektorでtitleタグをカスタマイズする方法

BizVektorのカスタマイズパターンを一挙公開！

BizVektorの3PRエリアの画像を丸くする

「BizVektorの3PRエリアの数を増やしたい」の解決策

BizVektorのCSSの直し方

幅広い業種で使えるおすすめのデザインスキン「BizVektor Attract」

フローティングメニューにスムーズスクロールの「上に戻る」を追加する

BizVektorの「連絡先」をウィジェットで変更可能にする

マーカー（強調表示）

テキストの背景色を付けてマーカーのように 強調表示する ことができます。色はメニューで選んで自由に設定できるので、重要度に応じて強調表示するテキストの背景色を変えても面白いですね。同時に テキストの色も設定できる ので、背景色が濃い場合も薄い場合も問題ないでしょう。

ボタン

自作すると意外と面倒なボタンです。色などの設定を選んで簡単に作成できます。

YouTube（レスポンシブ対応）

作成中のページにYouTube動画を埋め込む方法はいくつかありますが、問題はレスポンシブ対応です。Shortcodes Ultimateなら、レスポンシブ対応のYouTube動画を埋め込むことができます。

開閉式コンテンツ

よくある質問などに使える開閉式コンテンツも作れます。メニューは「スポイラー」または「アコーディオン」です。

マルチカラム

手作業で作ると面倒なマルチカラムにも対応できます。もちろん、レスポンシブです。メニューは「行」または「カラム」（列）です。

ドキュメントビューワー

アップロードしたPDFなどをページに埋め込んで参照できます。以下はPPTからエクスポートしたPDFファイルを埋め込んでいます。

まとめ

まだまだ紹介しきれないくらいShortcodes Ultimateプラグインは機能が豊富です。使い方も簡単なので効率的なページ作成に役立つように使いこなしましょう。

ダッシュボード上部に「Declaration of MTSSB_Article_Admin …略…」のようなエラーメッセージが表示されることがあります。これはWordPressの予約システムのプラグインMTS Simple Booking Cのエラーメッセージです。

MTS Simple Booking Cのエラーメッセージ

見づらいですが、次のような内容です。

意味を調べようと深い追いする必要はありません。エラーメッセージを非表示にするのが現実的です。

エラーメッセージを非表示にする

上記のエラーメッセージはWarning（警告）なので、画面が真っ白になるほど重大なエラーではありません。以下の手順でひとまず非表示にすることができます。

FTPソフトまたはレンタルサーバーのFTPツールを使って、MTS Simple Booking Cのフォルダ(1)からmts-simple-booking.phpというファイル(2)を開きます。具体的な場所はWordPressインストール先のwp-content/plugins/mts-simple-booking.phpです。

MTS Simple Booking Cのmts-simple-booking.phpを開く

1行目の <?php と2行目の /* の間に次のコードを入力します。エラーメッセージを非表示にするコードです。

error_reporting(0);

入力後のイメージは次のようになります。

「error_reporting(0);」を追加

ファイルを保存してアップロードすればダッシュボードのエラーメッセージが消えるはずです。

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

Contact Form 7では特別なメールタグを使うと、IPアドレスや送信日時、ページタイトルなどを取得することができます。それを活用して特定の端末（IPアドレス）からのメール送信を禁止する方法を紹介します。

Contact Form 7でIPアドレスを取得するタグ

Contact Form 7では次のようなタグを使ってIPアドレスなどを取得できます。

詳しくは以下のページも参考にしてください。

Contact Form 7の特別なメールタグ

これらのタグを活用して特定のIPアドレスからのメール送信をブロックすることができます。以下、手順を紹介します。

IPアドレスをメール本文に含める

ユーザーから送信されたメールに、送信元のIPアドレスを含めるように設定します。それには、上記のタグをContact Form 7の設定画面（「お問い合わせ」‐「コンタクトフォーム」メニューの編集画面）で編集する「メール」タブの本文に入力します。組み立てるタグの例は次のようになります。

IPアドレス：[_remote_ip]
ページタイトル：[_post_title]
URL：[_post_url]
送信日時：[_date][_time]

ここではIPアドレスのみが必須ですが、参考までに他の項目も含めてみました。

コンタクトフォームの編集画面に入力したイメージは次のようになります。

メールタグを追加したイメージ

言うまでもありませんが、これらのタグは入力項目ではないので、問い合わせフォーム自体には表示されませんが、管理者あてに送信されたメール本文には次のような内容（IPアドレス、ページタイトル、URL、送信日時）が追加されます。

メール本文にIPアドレスなどが入ってくる

特定のIPアドレスからのメール送信をブロック

そのIPアドレスからのメール送信を禁止したい場合は、「設定」‐「ディスカッション」メニューの「コメントブラックリスト」にIPアドレスを入力します。

ブロックしたいIPアドレスを指定する

「変更を保存」ボタンをクリックすると設定完了です。

ブロック対象の端末（IPアドレス）からメールを送信すると、次のようなメッセージが表示されてメールを送信できなくなります。

ブロックしたIPアドレスからメール送信できない

エラーメッセージを変更するには

エラーメッセージを変更するには、コンタクトフォームの編集画面で「メッセージ」タブを開いて「送信がスパムと見なされた」のメッセージを編集します。

エラーメッセージの変更

コンパクトなエラーメッセージにすることもできます。

エラーメッセージの変更イメージ

エラーメッセージを非表示にするには

ブロックしたメールについてエラーメッセージを非表示にするには次のようなCSSを子テーマのstyle.cssなどに入力します。

/* ブロックしたメールのメッセージを非表示に */
div.wpcf7-spam-blocked {
    display: none !important;
}

これにより、メール送信がブロックされた場合は何もメッセージが表示されなくなります。

WordPressデータベースの中にオリジナルで作成したテーブルからデータを表示する例を紹介します。任意のデータを格納したり、既存のデータをそのまま活用してWordPressサイトに表示したいときに役立ちます。参考にしてください。

WordPressデータベースにテーブルを追加

WordPressデータベースの中に任意のテーブルを作成します。ここでは、「test1」としました。

test1テーブルを追加

test1テーブルの構造は次のようにしましたが、これは自由で構いません。

test1テーブルの構造

テーブルに適当にデータを入力しておきます。

テストデータを入力

データを表示するショートコードを作成

このテーブルにアクセスするためのコードを書きます。さまざまなパターンが考えられますが、ここでは、ショートコードを使って最新のデータ（contentsフィールド）を表示するコードを作成します。

/* 任意のテーブルデータを表示 */
function view_test1() {
    global $wpdb;

    $sql = "SELECT contents FROM test1 ORDER BY id DESC;";
    $results = $wpdb->get_col($sql);

    return $results[0];
}
add_shortcode('test1', 'view_test1');

ポイントはWordPressのデータベースオブジェクト（$wpdb）を介してtest1テーブルにアクセスすることです。これにより、WordPressデータベース内に作成した任意のテーブル「test1」のデータを表示できるようになります。

ショートコードの動作確認

作成したショートコードをページの編集画面に入力します。

ショートコードを入力

ページを表示するとtest1テーブルのデータが表示されます。

オリジナルで作成したテーブルtest1のデータが表示される

あとはアイデア次第です。$wpdbを経由する形で自由にWordPressデータベース内のテーブルからデータを表示したり、データを更新することができます。

wpdbで使える命令について詳しくは以下のページも参考にしてください。

WordPressリファレンス／wpdb Class

WordPressサイトを納品する場合、納品先のクライアントが操作ミスをしないように不要なメニューを消したいこともあります。特に慣れないお客様に納品する場合は、次のように投稿だけできればよい状態の管理画面を使ってもらったほうが安心かもしれません。

投稿しかできないユーザーの管理画面

そのようなときはWP Admin UI Customizeプラグインが役立ちます。以下、使い方を紹介します。

WP Admin UI Customizeプラグインのインストール

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

WP Admin UI Customizeプラグインのインストール

インストール後は特別な設定なしで使い始めることができます。以下、不要なメニューを消す手順を紹介します。

メニューを制限するユーザー権限の設定

「WP Admin UI Customize」メニューを開いて管理画面の項目やメニューを非表示にしたいユーザーの権限を設定します。ここでは、管理者以外に全て同じメニューを見せる目的で管理者以外の権限すべてをチェックしています。

管理者以外はメニューを制限したい

「保存」ボタンをクリックすると設定完了です。

非表示メニューの設定

不要なメニューを非表示に

「WP Admin UI Customize」のサブメニューを開いて、不要な項目を非表示にしていきます。

不要なメニューを非表示に

サイドバーのメンテナンス

「サイドバー」メニューから不要なメニューをクリックして開き、「削除」ボタンをクリックします。または画面右側の「利用可能なメニュー」にドラッグアンドドロップして消すこともできます。

不要なメニューの削除

メニューをスッキリさせたイメージは次のようになります。

メニューをスッキリさせたイメージ

不要な入力項目を非表示に

「メタボックス」からは投稿や固定ページの入力画面で不要な項目を非表示にすることができます。

不要な入力項目を非表示に

完成した管理画面

不要なメニューを消していくと、スッキリした管理画面の完成です。

投稿しかできないユーザーの管理画面

これなら、「慣れないお客様の操作ミスで画面が真っ白に！」の心配もなくなるかもしれませんね。投稿しか任せていないユーザーのメニュー項目を削除するなど、使い方はアイデア次第です。

Googleアップデート（「Googleフレッドアップデート」と命名されています）が実施され、2017年3月9日、3月10日あたりの検索順位にかなり大幅な変動があったと、ネット上で話題になっています。皆様のサイトはいかがでしょうか。

【参考】【SEO速報】Googleフレッドアップデート実施！本日（2017年3月10日）もnamazで13.1位、日本・海外でも観測

コンテンツ品質ではなくリンク品質に関するアップデートとのことで私のサイトでは大幅な順位変動はありませんでしたが、このようなことがあるので、検索順位の変動をチェックするツールは必須です。

私は「GRC」というツールを使っていますが、同じキーワードについて毎日の検索順位をチェックできて履歴も保存できるので、自分のサイトの状況を把握するのに非常に役立っています。こんな感じで任意のサイト、任意のキーワードについて検索順位を毎日一覧でチェックできます。

各キーワードの検索順位のチェック

順位の変動もグラフで見ることができるので、急激な上昇や低下も検知することができます。

急激な順位低下も検知できる

あまり過敏になる必要はありませんが、順位が急低下したまま戻ってこなければ、何らかの対策が必要という目印にはなるでしょう。

検索順位が気になる方にはぜひおすすめします。

検索順位を調べるなら、検索順位チェックツールGRC

GoogleのPageSpeed Insightsでページの表示速度を測定しようとして、「PageSpeed Insights は、サーバーから 403 応答を受け取りました。」のようなエラーメッセージが表示されることがあります。

PageSpeed Insightsでページの表示速度を測定できない

サイトにアクセス制限がかけられている場合に、こうしたエラーメッセージが表示される場合があります。メンテナンス系のプラグインや、MW Authプラグインのようにログイン中のユーザーのみがサイトを閲覧できる状態になっていないか確認しましょう。

ページの表示速度を測定するには、一時的にでもアクセス制限を解除する必要があります。

PageSpeedチェックのためアクセス制限を解除

「403応答」とは

「403応答」とは、HTTPというプロトコルが返す403という応答（レスポンス）コードのことです。もう少し説明します。

403とは何？

ホームページを参照する場合、HTTPというプロトコルに基づいてサーバーとブラウザ（クライアント）の間でメッセージのやりとりが行われます。ブラウザからはサーバーに対して「ページを見せて」と要求（リクエスト）し、逆にサーバーからはブラウザに対してページの内容を含んだ応答（レスポンス）が返されます。

サーバーとクライアントのやりとり

要求に対して問題なければ「200」のような正常な結果を示すレスポンスコード（応答コード）が返されますが、問題があれば「400」（ページが見つからない）や「401」（認証が必要）、「403」（アクセス禁止）などのエラーコードが返されます。

「PageSpeed Insightsがサーバーから403応答を受け取った」というのも同じように、アクセス制限がかけられているページにPageSpeedがアクセスした結果、「アクセス禁止」を示す403というレスポンスコードが返されたためPageSpeedの測定ができなかったということです。

PageSpeedに限りませんが、レンタルサーバーを借りた直後などにみかける「403」は、このような仕組みになっています。

最近、さまざまなサイトで記事ページを表示したときに「続きを読む」ボタンをよく見かける気がします。クリックして全文を表示させる目的のボタンです。開閉式だったりもします。

詳細記事ページに「続きを読む」は必要でしょうか？

設置するのは自由ですが、ユーザーの立場から言えば記事ページを開いているのにもう一度ボタンをクリックして全文を表示させるって、少し面倒じゃないでしょうか？

もちろん、好き嫌いの問題なので考えすぎかもしれませんが、ただし、です。

もしも「そんなのは嫌いだ！」という「続きを読むボタン反対派」の中にGoogleのキーマンが含まれていたら、ちょっと状況は違ってくるでしょう。「Googleがダメって言うなら、やめこと」になるかもしれませんね。

そんな「続きを読む」ボタンに関する話題を紹介します。

Googleのキーマンが「続きを読む」ボタンは嫌いだとツイート

こんな記事を見つけました。

【参考記事】モバイルの「続きを読む」ボタンにグーグルの主要メンバーが不快感、将来は検索で不利になるのか？

「グーグルの主要メンバーが不快感」とは、どういうことでしょうか。上記の記事でも紹介されていたGoogleスタッフのジョン・ミューラー氏のツイートはこんな感じです。

@pauledmondson @methode It's not an interstitial, but oh how I hate those. WHY WHY WHY would a site want to hide their content?

— John ☆.o(≧▽≦)o.☆ (@JohnMu) February 2, 2017

簡単に訳すと「（「続きを読む」ボタンはペナルティになるような）インタースティシャルではないが、私は嫌いだ。いったい、なぜ、なぜ、どうして、コンテンツを隠したがるのか？」

よほど「続きを読む」ボタンが嫌いなようですが、突然「インタースティシャルではないが」と言われても何のことだかピンとこないかもしれないので、もう少し情報を補足して説明します。

「インタースティシャル」とは

「インタースティシャル」とは、モバイルページで画面全体に覆い被さるような全画面広告のことで、こんなイメージです。

インタースティシャル広告のイメージ

画面全体を覆うことでユーザーの利便性を損ねるためSEO的にマイナス評価になります。

【参考】Google、全画面広告にペナルティ適用／公式アナウンス内容は?

そんなわけで、SEOの観点から広告以外のパーツについて「これもインタースティシャルに該当するのか？」と話題になることもあります。

モバイルの「続きを読む」は「インタースティシャル」なのか

その流れで話題になったのが、『モバイルページの「続きを読む」ボタンもインタースティシャルに該当するのか？』という質問です。

確かに、面積の限られたモバイル端末にわざわざ本文を隠して全文表示させるためのボタンを設置するのはユーザーの利便性から見てどうなのかと疑問に思う方もいることでしょう。そんな質問に対する答えが上記のツイート「私は記事嫌いだ」です。

「WHY WHY WHY」から、よほど「続きを読む」でコンテンツを隠すのが嫌いなようで。

記事の全文を読もうとしてるのに、それを隠すのはおかしいでしょ、ということです。

なぜ「続きを読む」ボタンが嫌われるのか？

なぜ、そこまで「続きを読む」ボタンが嫌われているのか。推測に過ぎませんが、このような理由が考えられます。

• 不要なボタンクリックによってPVが水増しされる
• コンテンツを隠すことで広告が見やすくなる（広告のクリック率に影響）
• コンテンツが隠れていることで正確なページ評価に影響が出るかも

こうしたことが原因でGoogleの提供するサービスに影響が出ることを危惧しているのではないでしょうか。広告のクリック率や表示回数の統計値が変わってくる可能性もあるので。

また、PVが水増しされたり、コンテンツを隠すことで広告が目立つレイアウトにすることは、Googleが提唱する「高品質なサイト」の精神に反するものになるかもしれません。

そんなわけで「私は嫌いだ」の発言になるのも納得です。

現時点では「ペナルティにする」のような発言はないようですが、将来的には何らかのアクションがとられるかもしれません。

まとめ

あくまでデザインの一環として記事詳細ページに「続きを読む」ボタンを取り入れることがあるかもしれませんが、Googleのキーマンは不快に思っていることを覚えておきましょう。

とはいえ、クイズなどのように一部を隠すことで成り立っているコンテンツもあるでしょうから、必ずしも「続きを読む」のようなボタンが使用禁止というわけでもないはずですが、念のためご注意ください。

もしも、設置目的が広告のクリック率を上げるとか、PVを増やすとか、「高品質コンテンツの作成」という主旨から外れていると感じたなら、そのボタンを取り除くことも検討した方がよいでしょう。

賢威 7ではフッターを自由に編集できるようになっていますが、3列とか4列に分かれていれば、いろいろなパーツを差し込めて便利だという声を聞きます。そこで、フッターを3列にする方法を紹介します。こんなイメージです。

フッターを3列にして使いたい

3列にはGoogleマップ、最近の投稿、YouTube動画を入れていますが、あくまでサンプルなので使い方は自由、あなたのアイデア次第です。以下、手順を紹介します。

賢威 7のフッターとは

自由に入力できるのは便利、でも…

賢威 7では、フッターエリアを自由に編集できるようになっています。具体的には「賢威の設定」‐「フッター」メニューを開いて「自由記述欄」に文字通り好きな内容を入力できます。

自由に入力できる賢威 7のフッター

とはいえ、この広いエリアに1つだけパーツを入れるのはもったいないかもしれません。たとえば、Googleマップを表示するとしても次のようなレイアウトでは少し違和感があるでしょう。

フッターにGoogleマップだけを表示したイメージ

2列や3列にした方が使いやすいかもしれません。こんな感じです。

フッターを3列にして使いたい

フッターを2列や3列にするための戦略

自由記述欄を2列や3列にするといっても、その方法が問題です。divタグやtableタグを駆使して横並びのレイアウトを作成したとしても問題はレスポンシブ対応です。相当な時間がかかって止めたくなるかもしれません。

そんなときに役立つのがShortcodes Ultimateプラグインです。さまざまなパーツをショートコードで追加できる非常に便利なプラグインです。今回の要件の2列や3列のエリア（マルチカラム）やGoogleマップ、YouTube動画などもショートコードで差し込むことができます。

Shortcodes Ultimateプラグインについて詳しくは以下のページも参考にしてください。

これは便利！「地図・動画・枠線もショートコードで」のShortcodes Ultimateプラグイン

以下、Shortcodes Ultimateプラグインを使って賢威 7のフッターを3列にして好きなパーツを3つ入れるまでの手順を紹介します。

Shortcodes Ultimateのインストール

フッターを3列にするためShortcodes Ultimateプラグインをインストールします。

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

フッターを3列にする

賢威 7のフッターを3列にするため、「賢威の設定」‐「フッター」メニューを開いて「ショートコードを挿入」ボタンをクリックします。

フッターにショートコードを挿入

Shortcodes Ultimateプラグインで使用可能な膨大なパーツアイコンのうち、右から2列目にある「行」をクリックします。マルチカラムを作成できるパーツ（ショートコード）です。

マルチカラム用のパーツ「行」をクリック

追加するショートコード（コンテンツ）(1)を確認して、「ショートコードを挿入」ボタン(2)をクリックします。

ショートコードを確認して追加

次のようにマルチカラムのショートコードが追加されます。

マルチカラムのショートコードが追加される

ひとまず保存して、サイトを確認してみましょう。

フッターが3列になる

なんとなくフッターが3列になりそうなイメージは持っていただけると思います。あとは、「コンテンツ」の文字を好きな内容に置き換えれば完成です。

フッターの編集

上記の3列のショートコードは改行されていないので見づらいかもしれません。編集しやすいように次のように整形しても大丈夫です。

3列を編集しやすいように改行する

ただし、この状態で保存すると意図しない場所に改行が入るなどしてレイアウトが崩れる場合があります。レイアウトがうまくいかない場合は保存する前に次のように改行を削除してみてください。

レイアウトが崩れる場合はショートコードの改行を削除して保存

3列フッターの活用例

あとは自由に3列にパーツを追加していけば大丈夫です。ここでは次のようなコンテンツを入れてみます。すべてShortcodes Ultimateプラグインのショートコードだけで完成します。

• Googleマップ
• 最近の投稿（新着情報）
• YouTube動画

3つのパーツはショートコードのsu_columnの開始と終了の間に入力します。次の赤い部分です。

3列用のショートコードを追加する位置

カーソルを上記の位置に移動してから、以下のパーツを追加してください。

Googleマップを追加

フッターの編集画面で「ショートコードを挿入」ボタンをクリックして「Googleマップ」を選択します。

Googleマップを選択

「マーカー」(1)に住所を入力して「ショートコードを挿入」ボタン(2)をクリックします。

Googleマップのショートコードを挿入

Googleマップのショートコードが追加されます。

Googleマップのショートコードが追加される

必要に応じて、保存してサイトを確認してください。フッターにGoogleマップが表示されます。

フッターにGoogleマップが表示される

最近の投稿（新着情報）を追加

フッターの編集画面で「ショートコードを挿入」ボタンをクリックして「投稿」を選択します。

投稿一覧を追加

「テンプレート」から「記事のタイトルとリスト」（templates/list-loop.php）をクリックします。これにより、記事のタイトルが一覧表示されます。

投稿一覧のテンプレートを選択

「ページあたりの投稿数」（表示件数）を「5」くらいに設定しておきます。

投稿の表示件数を設定

その他、さまざまな設定が可能ですが、ひとまず初期設定のまま進めます。画面を下にスクロールして「ショートコードを挿入」ボタンをクリックすると設定完了です。

「ショートコードを挿入」ボタンをクリック

投稿一覧のショートコードが追加されます。

投稿一覧のショートコードが追加される

必要に応じて、保存してサイトを確認してください。フッターに最近の投稿表示されます。

フッターに投稿一覧が追加される

YouTubeの追加

フッターの編集画面で「ショートコードを挿入」ボタンをクリックして「YouTube」を選択します。

YouTubeを追加

表示したい動画のURLを入力します。

動画のURLを入力

その他、オプションを指定可能ですが、ここでは初期設定のまま進みます。画面を下にスクロールして「ショートコードを挿入」ボタンをクリックすると設定完了です。

「ショートコードを挿入」ボタンをクリック

YouTubeのショートコードが追加されます。

YouTubeのショートコードが追加される

必要に応じて、保存してサイトを確認してください。フッターにYouTube動画が追加されます。

YouTube動画が追加される

レイアウトの修正

3つのパーツは作成できましたが、予想通りレイアウトが崩れています。このようになった場合は、ショートコードの改行を削除して保存してみましょう。

ショートコードの改行を削除して保存

コードが見づらくなりましたがサイトを確認すると、3列にレイアウトされているはずです。

3列のフッターが完成

まとめ

これで賢威 7のフッターを3列にする作業は完了です。あとは、2列や4列にしたり、各列の内容を変更するなど試行錯誤してみてください。3列の内容は必ずしもショートコードにする必要はありません。自由に入力して大丈夫です。

調査会社StatCounterによると、2017年3月時点のOSシェアで、Androidが37.93%、Windowsが37.91%となり、Androidが初めての首位に立ったとのことです。

AndroidがWindowsを抜いてOSシェア首位に

シェア状況はこちらから確認できます。

StatCounter：Operating System Market Share Worldwide

モバイルで圧倒的なAndroid、デスクトップではWindowsの牙城

これは言うまでもなくスマホの爆発的な普及によるもので、モバイル端末に限るとAndroidが70%超で圧倒的なシェアを確保しています。一方、デスクトップ環境ではWindowsが80%超のシェア、相変わらずの首位となっています。

シェア2%から5年でWindowsを逆転したAndroid

5年前の2012年時点ではAndroidのシェアは2%。「その他大勢」のうちの1つに過ぎなかったAndroidですが、スマホの爆発的な普及の波の乗ったとはいえ、わずか5年でWindowsを逆転するとは、、、

シェア2%から5年でWindowsを逆転したAndroid

（グラフはStatCounter社のサイトより転載）

以上、AndroidがOSシェアでWindowsを抜いて初の首位に立った件、報告を終わります。

BizVektorの拡張デザインスキン「BizVektor Vast」ではヘッダー画像が画面いっぱいに表示され、インパクトのあるサイトに仕上げることができます。

ヘッダー画像が画面いっぱいに表示される拡張デザインスキン「BizVektor Vast」

その他、BizVektor Vastの特徴をいくつか紹介します。ピンときたらご購入を検討ください。

グローバルメニューが画面上部に固定される

画面をスクロールしたときにグローバルメニューが画面上部に固定されます。動作イメージは以下の動画でご確認ください。

ヘッダーの色や透明度を設定できる

画面上部のヘッダーは色や透明度を設定できます。

メニューの背景色を設定できる

透明度を指定すれば、画面スクロール時にヘッダーの裏にコンテンツが透けて見えるようになります。

ヘッダーの透明度を設定できる

PCとスマホで違うヘッダー画像を表示できる

基本的にPC画面は横長、スマホ画面は縦長なので、同じ画像を使うとスマホのヘッダー画像が予想外に小さく見える場合がありますが、BizVektor Vastではモバイル端末用のヘッダー画像を設定できます。

モバイル端末用のヘッダー画像を設定できる

PCとスマホで違うヘッダー画像になります。

PCとスマホで違うヘッダー画像にできる

ページタイトルの背景画像を表示できる

ページタイトルの背景画像

以上のような機能を組み込みたい方にBizVektor Vastをおすすめします。

そんな方にもピッタリ！

パラパラめくりながら
サクサク読める

WordPressの
ヒント集を作りました。

「WordPress 189のヒント」の特徴

紙面はこんなイメージです

こんな方におすすめします

「WordPress 189のヒント」の購入方法

紹介したヒント一覧

クリックすると各ジャンルのヒントが一覧表示されます。

Lightningの子テーマを作る方法を紹介します。CSSだけをカスタマイズする予定なら「CSSカスタマイズ」メニューも使えるので必須ではありませんが、PHPも含めて本格的にカスタマイズする場合は子テーマを使った方が無難です。ここでは、テーマとしてLightningが有効化されている前提で話を進めます。

Lightningの子テーマをダウンロード

Lightningのホームページから「設定ガイド」‐「子テーマでのカスタマイズ」メニューを開いて「子テーマカスタマイズサンプル」をダウンロードします。

ダウンロードページのURLは次のとおりです。

Lightning／ 子テーマでのカスタマイズ

Lightningの子テーマサンプルをダウンロード

子テーマをインストール

WordPressの管理画面に戻って「外観」‐「テーマ」メニューを開いて「新規追加」をクリックします。

テーマを新規追加

「テーマのアップロード」をクリックします。

テーマのアップロード

「参照」ボタンをクリックして、ダウンロード済みの子テーマ（例：lightning_child_sample_v_0_1_2.zip）を選択します。

「参照」ボタンをクリック

ファイルを選択後、「今すぐインストール」をクリックします。

子テーマをインストール

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

子テーマを有効化

「外観」-「テーマ」メニューを見ると、親テーマのLightning(1) に変わって子テーマ(2)が有効化されていることがわかります。

子テーマが有効化されている

これで子テーマに切り替える設定は完了です。

子テーマを使ったカスタマイズ

サイト名のスタイルを変更する

子テーマを使ったカスタマイズが反映されるかのチェックとして、ここでは、ヘッダーのサイト名（サンプルPC教室）の色やサイズを変えてみます。

サイト名のスタイルを変更したい

「外観」-「テーマの編集」メニューでstyle.cssを開いて、最後の行に続けて次のようなコードを入力します。

/* サイト名のスタイルを変更する */
.navbar-brand a {
    font-size: 40px;
    font-weight: bold;
    color: navy;
}

CSSを入力したイメージは次のようになります。

CSSの入力後

画面を下にスクロールして「ファイルを更新」ボタンをクリックすると設定完了です。サイトを表示してCSSが反映されているか確認しましょう。

入力したCSSが反映されているか確認

コピーライトのフォントサイズを変更する

次のCSSを使うと、フッターにあるコピーライトのフォントサイズを変更することができます。実用性はありませんが、子テーマが機能しているかのチェックにお使いください。

/* コピーライトのフォントサイズを変更する */
footer .copySection p {
    font-size: 16px;
}

コピーライトのフォントサイズが大きくなります。

コピーライトのフォントサイズが大きくなる

入力したCSSが反映されない原因

入力したCSSが反映されず、カスタマイズ前のスタイルから変わらない場合、次のような原因が考えられます。

• ブラウザのキャッシュ（古い内容）を見ている --- ブラウザの閲覧履歴を削除してみてください。
• 入力したCSSが文法的に間違っている --- 入力内容をチェックしましょう。すべて半角です。特に記号や全角スペースにご注意ください。
• 入力したCSSの優先順位が低い --- 既存のCSSとバッティングしているかもしれません。

CSSが反映されないときは以下のページも参考にしてください。

子テーマのstyle.cssに入力したCSSが反映されない理由と対策

CSSの変更が反映されないときはセレクタの優先順位をチェック