Contact Form 7 の使い方

Contact Form 7は WordPress に問い合わせページの設置を支援するプラグインです。

Contact Form7は簡単に設置できるため、世界中で使われています。

  • 初心者でも導入設定が簡単
  • 高機能で様々な部品をサポート
  • 有名プラグインのため信頼感が高い

Contact Form 7は何しろ設定が簡単で、他の手段と比較してすぐに導入できる点がメリットとして大きくなっています。
当記事では、Contact Form 7を単に利用するだけでなく、セキュリティを高め使用する方法についてもご紹介します。

使い方

WordPress の管理画面から「お問い合わせ」を選択します。
Contact Form 7の画面が開くので、「新規追加」を押下します。

フォーム作成

フォームの作成画面が開きます。

このままですぐにフォームを使用することができます。

セキュリティ対策

Contact Form 7で問い合わせページを設置すると、セキュリティ対策が必要です。
ContactForm 7のような有名プラグインは常に、スパムメールからの攻撃にさらされているからです。

承諾確認チェックボックスでスパム対策

承諾確認チェックボックスを追加することで、チェックなしでフォームを送信できなくします。

同意条件に、承諾確認で表示したい文言を入力します。

承諾確認を利用することで、セキュリティを高めるだけでなく、フォームの情報の利用について記載したりフォームの立ち位置を明確にする助けになるでしょう。

reCAPTCHA (v3) でスパム対策

reCAPTCHA とは、スパムボットなどの攻撃からサイトを防御する仕組みのことです。

Contact Form 7ではスパム対策としてこの reCAPTCHA を導入する仕組みがあります。

Googleアカウントで、サイトを登録

reCAPTCHA は Google のサービスになるので、reCAPTCHA から Google アカウントを登録します。

ドメイン、reCAPTCHA のタイプを指定します。

Google reCAPTCHA追加画面

サイトキーとシークレットキーがコピーできるようになります。

WordPress の管理画面から、Contact Form 7のインテグレーションを押下します。

Contact Form 7のインテグレーション

reCAPTCHA という項目があるので、「インテグレーションのセットアップ」ボタンを押下します。

Contact Form 7の reCAPTCHA インテグレーション

「変更を保存」ボタンを押下します。

これで、reCAPTCHA が有効化されます。
reCAPTCHA (v3)ではreCAPTCHA v2 にあった「私はロボットではありません」のチェックボックスが不要になります。有効化されるだけで reCAPTCHA 対応済みのフォームとなります。

参考: reCAPTCHA (v3) | Contact Form 7 [日本語]

まとめ

Contact Form 7 は、お問い合わせフォームを作るための基本的機能が揃っているプラグインです。

この記事では、Contact Form 7のスパム対策などセキュリティ強化についても紹介しました。

ぜひ利用してお問い合わせページを用意してください。

the_excerpt() の使い方

投稿の抜粋を表示するためのタグです。

使い方

the_excerpt()を呼ぶだけで使えます。

<?php the_excerpt(); ?>

注意

日本語の記事を扱うため、基本的に WP Multibyte Patch と一緒に使うのがいいです。

リンクのカスタマイズ

the_excerpt()はデフォルトではリンクをだしてくれないので、「続きを読む」のようなリンクを作るには、functions.php の編集が必要です。

https://wpdocs.osdn.jp/%E3%80%8C%E7%B6%9A%E3%81%8D%E3%82%92%E8%AA%AD%E3%82%80%E3%80%8D%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA#the_excerpt.28.29_.E3.81.A7.E8.A1.A8.E7.A4.BA.E3.81.95.E3.82.8C.E3.82.8B.E3.80.8C.E7.B6.9A.E3.81.8D.E3.82.92.E8.AA.AD.E3.82.80.E3.80.8D.E3.81.AE.E5.A4.89.E6.9B.B4

参考

https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_excerpt

Google Tag Manager の導入はプラグインでやろう

Google Tag Manager の WordPress への導入はプラグインを利用しています。

タグマネージャーの導入プラグイン

Google Tag Manager for WordPress

いろいろ細かく設定できるプラグインです。

Google Tag Manager for WordPress – WordPress プラグイン | WordPress.org 日本語

Google Tag Manager

シンプルでタグマネージャーを追加するだけのプラグインです。

Google Tag Manager – WordPress プラグイン | WordPress.org 日本語

Import Users from CSV でユーザーのインポート

WordPress へユーザーを CSV で一括インポートするには、「Import Users from CSV」が便利です。

ユーザーに紐づくメタ情報付きで、ニックネームやパスワードなどを一気に登録できます。

使い方

ユーザー > Import users from a CSV file から管理画面を表示します。
CSV のインポートはこちらから行うことができます。

管理画面にサンプルファイルがあるので、そのファイルに合わせて試してみるとよいでしょう。

インポートの各項目

「Import Users from CSV」ではいくつかインポートの設定があります。

  • CSV file
  • Notification Notification Send to new users
  • Password nag Password nag Show password nag on new users signon
  • Users update Users update Update user when a username or email exists

Notification にチェックを入れると、追加したユーザーにメールが送信されます。

使った感触

ユーザーを一括登録するには十分動作します。
便利なプラグインと言えるでしょう。

メール通知機能

このプラグインは、Notification のチェックでメール配信が行われます。
しかしメールが英語なので、使い勝手としてはいまいちです。

ユーザー名の重複に注意

user 名が重複するとエラーになるので注意が必要です。
インポート前に重複を確認しましょう。

参考

WordPress Ultimate CSV/XML Importer Plugin の設定

CSV を import するためのプラグインです。
表示は「Import and Export WordPress Data as CSV or XML」となっています。

WP Ultimate CSV Importer の設定

プラグイン WP Ultimate CSV Importer を有効にしたら、CSVをアップロードしてみましょう。

CSV のインポート画面

「Import each record as ~」 とあるので投稿タイプを選択します。
ページやカスタム投稿タイプなど選択できるので便利です。

import の各項目

フィールド説明CSVのサンプル
post_titleタイトル
post_contentコンテンツ
post_excerpt要約
post_date日付
post_categoryカテゴリー
post_tagタグ
post_author投稿者
featured_image
post_slugスラッグ
post_status公開ステータスの指定
publish / draft / pending / sticky / private / protected を指定する
publish
post_format投稿形式の選択

WP Ultimate CSV Importer の問題点

有料でない場合、ユーザーの Import には対応していないようです。
CSV のプラグインこれ一本で行きたい場合は課金しても良いでしょう。

参考

Introduction for WP Ultimate CSV Importer Free and all premium bundles

Post, Page & Custom Post Import | Ultimate CSV Importer

add_shortcode() の使い方

WordPress で ショートコードを追加するためには、add_shortcode() を使います。
設定は functions.php に書きましょう。

メリット

ショートコードを使えば例えば WordPress のコンテンツ内で PHP のコードを実行させるような動作が容易になります。

記事内の使い方

タグの使い方

タグの記法がいくつかあります。

タグでコンテンツを挟むタイプを基本と考えておくと良いです。

[tag]コンテンツ[/tag]

タグでは属性を扱うことができます。

[tag hoge="属性値"]コンテンツ[/tag]

属性でパラメータを設定することで柔軟な設定が可能です。

functions.php の表記

構文は以下になります。

<?php add_shortcode( $tag , $foo ); ?>

前の引数 $tag とあるものがショートコードになります。

関数側はこんな感じで引数やコンテンツを受け取ることができます。

function foo( $atts, $content = "" ) {
	return 'content = $atts["bar"] . $content';
}
add_shortcode( 'tag', 'foo' );

参考

関数リファレンス/add shortcode – WordPress Codex 日本語版

wp_head() の使い方

スクリプトタグやメタタグを出力するには、wp_head() を使用します。

使い方

スクリプトタグを出力したいテーマないの場所(head タグ内)で、wp_head()をよびます。

<?php wp_head(); ?>

基本的にページで一度だけ呼び出します。WordPress で wp_head() を削除すると動作に支障が場合があります。

また、wp_head() には引数がありません。
従ってカスタマイズしたい場合は、functions.php に記述することになります。

wp_head()に追加

内容を追加する場合は、functions.php で add_actionを使います。

以下の例では、style タグを追加しています。

add_action( 'wp_head', 'add_style_tag' );

function add_style_tag() {
	echo "<style> .wp_head_class { background-color : red; } </style>";
}

出力コードの編集

wp_head() に出力されるコードを編集するには、functions.php に add_filter でスクリプトに追加するコードを書くのがよくあるやり方のようです。

if (!(is_admin())) {
	function add_attr_for_style($url) {
		return 編集処理;
	}
	add_filter('clean_url', 'add_attr_for_style', 10, 1);
}

style タグに属性を追加するようなパターンですね。

参考

関数リファレンス/wp head – WordPress Codex 日本語版

プラグイン API/アクションフック一覧/wp head – WordPress Codex 日本語版

clean_url | Hook | WordPress Developer Resources

Broken Link Checker でリンクエラーをチェック

リンク切れチェックの必須のプラグイン Broken Link Checker のご紹介です。

メリット

WordPress の運用では、リンク切れ修正作業が必ず必要になります。
リンクとは時によって無効になることがあるからです。

リンクは常にアクセスできるように運用していきましょう。

使い方

プラグインを有効にするだけで、投稿内のリンクを確認できます。
Broken Link Checker 内から修正や修正後のリンク切れのチェックをできます。

参考

dynamic_sidebar() の使い方

ウィジェットエリアを呼び出すために dynamic_sidebar() を使用します。

テーマ作成では頻出の関数でしょうか。

メリット

WordPress を使いこなすにはウィジェットの活用が効果的です。
会社ページによくある「お知らせ」のようなエリアを作るには dynamic_sidebar() が便利です。

sidebar という名前がついていますが、ウィジェットを呼び出せるので直感的にはわかりにくい気がします。

使い方

ウィジェットを表示したい場所で dynamic_sidebar() を呼びます。

<?php dynamic_sidebar(サイドバーの名前かID); ?>

例えば、newsという名前のウィジェットを呼び出したい場合は引数に名前を渡します。

<?php dynamic_sidebar('news'); ?>

参考

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/dynamic_sidebar

get_sidebar()の使い方

テーマディレクトリに置かれた sidebar.php という名前のテンプレートファイルを読み込む関数です。

テーマ作成では良く出ててくる関数なので覚えておくといいでしょう。

メリット

WordPress のテーマを作っていくと、ついテーマが複雑になっていきます。
サイドバーとしての役割は、sidebar.php などのテンプレートファイルに分割し、テーマをシンプルに保つようにしてください。

そのような際に get_sidebar() が役立ちます。

使い方

get_sidebar は呼ぶだけで sidebar.php を呼び出します。

<?php get_sidebar( サイドバー名 ); ?>

サイドバー名を指定しなければ sidebar.phpを呼び出します。
get_sidebar( ‘news’ ); のようにサイドバー名を指定すると、sidebar-news.php を呼び出します。

テンプレートファイルと合わせて get_sidebar による読み込みが必要です。

参考

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_sidebar