WordPressにお問合せフォームを作る

環境

WordPress 4.9.1
Contact Form 7 4.9.2
WP Mail SMTP 1.2.2


WordPressの固定ページにお問合せフォームを作成し、
問い合わせがあった場合はメールを飛ばします。
なお、利用するメールサーバは外部のメールサーバとします。

構築手順

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

以下のプラグインをインストールし、有効化します。

  • Contact Form 7
  • WP Mail SMTP

※『Contact Form 7』は類似プラグインで『Contact Form7』(7の前にスペース無し)もあるので注意。

■お問合せフォームの設定

インストール済みプラグイン一覧画面にて「Contact Form 7」の設定を選択します。

フォーム一覧画面が表示され、「コンタクトフォーム1」というフォームが自動で作られているので「編集」を選択する。

ここでフォーム名やフォームの内容を編集できる。

各タブの内容は以下の通りです。

  • フォーム
    • WEB画面で表示するフォームの内容を設定できます
      アスタリスクを付けると必須項目になります
  • メール
    • フォームに入力された際に送信するメールに関する設定
      送信元については後工程の「WP Mail SMTP」の設定にて実施するので設定不要です
  • メッセージ
    • フォームを入力した際に画面上で表示するメッセージ
  • その他の設定
    • 細かいカスタマイズもできるようだが、ここでは割愛します

また、フォーム一覧画面に記載されている「ショートコード」は最終的に固定ページに埋め込むので控えておいてください。

■メールサーバの設定

インストール済みプラグイン一覧画面にて「WP Mail SMTP」の設定を選択します。

※左メニューより『設定 > WP Mail SMTP』と選択しても良いです。

送信元アドレス、送信者名を適宜入力し、メーラーは環境にあったものを選んでください。
メーラーがよく分からなければ「Other SMTP」(よくあるメールサーバのホスト名とかを指定する方式)を選択すれば良いです。

あとは選んだメーラーに依って違う詳細設定項目が下に現れるので、そこを入力して『Save Settings』をクリックすれば設定完了です。

■固定ページの作成

手順「お問合せフォームの設定」にて控えておいたショートコードを固定ページに記載するだけです。
必要に応じてdivタグで括ったりヘッダーを付けるなどの装飾をしてください。

以上で問い合わせフォームの作成は完了です。

【WordPress】テーマで指定されたCSSがうまく読み込めない

WordPressで他人が作成したテーマを使っているとCSSがうまく読み込めない時があります。
条件としては以下の両方に当てはまっている場合だと思います。

  • WordPressの管理画面と公開画面でドメインが違う
  • テーマ内にstyle.css以外のCSSファイルがあり、それをwp_enqueue_styleを使って読み込んでいる

このとき、ブラウザの開発ツールでコンソールを表示すると、以下のようなエラーが発生していると思います。

Access to Font at 'http://yourdomain1.com/wp-content/themes/sparkling/assets/fonts/glyphicons-halflings-regular.woff2' from origin 'http://yourdomain2.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://yourdomain2.com' is therefore not allowed access.

クロスドメインなどが原因のようなのですが、手早く直したかったので
以下の修正をして直しました。

①wp_enqueue_styleをしている箇所をコメントアウトする。(テーマによるが、function.phpなどに記載あり)

// wp_enqueue_style( 'bs', get_template_directory_uri() . '/assets/css/bootstrap.min.css' );
// wp_enqueue_style( 'awe', get_template_directory_uri() . '/assets/css/font-awesome.min.css' );

②htmlのheadタグ内にてCSS読み込み処理を記載する。(テーマによるが、header.phpなどに記載あり)
※以下例ではCDNを指定しています。

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

これで正常にCSSが読み込まれ、ブラウザのコンソールからもエラーが消えました。

【WordPress】SyntaxHighlighter Evolvedを高速化する

Wordperssのプラグイン『SyntaxHighlighter Evolved』を入れていたところ
画面表示がとても遅くなったので高速化しました。

〜〜〜2017/2/11 追記〜〜〜
プラグインを変えた方が早いかもしれないです
「WP Code Highlight.js」に変えてみたところ、表示は問題なく早いですし
paddingなどもこちらの方が気に入ってます。
〜〜〜追記終わり〜〜〜

■環境
CentOS 7.3
Wordpress 4.7.2
SyntaxHighlighter Evolved 3.2.1
※前提条件として、Wordpressを置いてあるサーバを操作できる権限があることとします

『SyntaxHighlighter Evolved』は各種言語に対応しているのですが、
実際、自分は書かないなーという言語も入っているので、不要なものは
プラグインで読み込まないようにします。

具体的には、プラグイン内のPHPファイルを修正し、不要な言語の設定を読み込んでいそうな行を
コメントアウトします。

# cd /{wordpressが配置されているディレクトリ}/wp-content/plugins/syntaxhighlighter
# vim syntaxhighlighter.php

コメントアウト箇所は114行目あたりから始まる以下の部分です。

wp_register_script( 'syntaxhighlighter-brush-○○○',〜〜〜 $this->agshver );

上記の「○○○」部分に言語名が入っているので、不要な言語の行はコメントアウトします。

あと、あまり効果があるか分かりませんが、テーマも使わないものはコメントアウトしてしまいました。
該当箇所は149行目あたりから始まる以下の部分です。

wp_register_stype( 'syntaxhighlighter-theme-○○○',〜〜〜 $this->agshver );

上記の「○○○」部分にテーマ名が入ります。

上記でコメントアウトした言語、テーマについて
下の方の行で配列に格納されているので、そこもコメントアウトします。

言語についての配列は、162行目あたりにあります。

$this->brushes = (array) apply_filters( 'syntaxhighlighter_brushes', array(
    'as3'           => 'as3',
    'actionscript3' => 'as3',
    'bash'          => 'bash',
    'shell'         => 'bash',
    以下略

テーマについての配列は、243行目あたりにあります。

$this->themes = (array) apply_filters( 'syntaxhighlighter_themes', array(
    'default'    => __( 'Default',      'syntaxhighlighter' ),
    'django'     => __( 'Django',       'syntaxhighlighter' ),
    'eclipse'    => __( 'Eclipse',      'syntaxhighlighter' ),
    'emacs'      => __( 'Emacs',        'syntaxhighlighter' ),
    'fadetogrey' => __( 'Fade to Grey', 'syntaxhighlighter' ),
    'midnight'   => __( 'Midnight',     'syntaxhighlighter' ),
    'rdark'      => __( 'RDark',        'syntaxhighlighter' ),
    'none'       => __( '[None]',       'syntaxhighlighter' ),
) );

上記箇所を適当にコメントアウトすると、画面表示がいくらか早くなりました。