Contact Form 7 に「ファィル添付」&「CAPTCHA」設定

お問い合わせ内容にファイルが添付出来ないとご指摘がありましたので、ファイル添付出来るようにカスタマイズしました。

以前、「お問い合わせホームプラグインContact Form 7 のインストール方法から設置方法まで」で初期設定の方法は掲載しましたので、今回はカスタマイズ方法のみにさせて頂きます。

お問い合わせホームプラグインContact Form 7 のインストール方法から設置方法まで

1.フォームにファイルを添付できるようにする

 

1-1.ダッシュボードからコンタクトフォームにアクセスする

現在のフォームを編集する場合は、
ダッシュボードの「お問い合わせ」→「コンタクトホーム」→「編集したいタイトル」の編集をクリックするとフォーム画面になります。

※新規で作りたい場合は、
ダッシュボードの「お問い合わせ」→「新規追加」をクリックしてください。

 

1-2.ファイルをクリックします。

すると、次のようにフォームタグ生成画面になります。

1-3.フォームタグ生成画面

1-3-1.ファイルサイズの上限(バイト)を設定する。

ファイルサイズの上限(バイト):では、ファイルの上限を設定できます。

デフォルトでは、許容ファイルサイズは1 MB(1048576バイト)です。

許容される最大ファイルサイズを制限します。オプションで、kb(キロバイト)またはmb(メガバイト)の接尾辞を使用できます。接尾辞を省略すると、数値はバイトを意味します。

limit:1048576
limit:1024kb
limit:1mb

 

1-3-2.受け入れ可能なファイル形式を設定できます。

デフォルトのファイルタイプ(拡張子)は、jpgjpegpnggifpdfdocdocxpptpptxodtavioggm4amovmp3mp4mpgwavwmvです。

複数指定する場合は、拡張子を,(カンマ)で区切ってください。

するとフォームタグ生成:ファイルの一番下にタグができます。

1-3-3.タグをフォームに追加する。

[file file-537 limit:2mb filetypes:jpg|png|pdf]をフォームに追加します。

訪問者がわかりやすいように

<label>添付可能なファイル形式:jpg png pdf
ファイル容量:最大2mb </label>と表示するようにフォームに追加しました。

入力が終わりましたら、保存してください。

1-3-4.メールのタグをファイル添付にコピペする

最後に保存をしてください。

既存のフォームを編集された方はこれで終わりですが、新規でファイルを作成された方は、投稿、固定ページなどの新規追加でショートコードをテキストエディタにペーストしてください。

 

2.「CAPTCHA」でスパムから守る

 

スパム目的の自動投稿の防止としてCAPTCHAを利用することができます。

2-1.Really Simple CAPTCHAをインストールする

Contact Form 7は、Really Simple CAPTCHAを公​​式に認可されたCAPTCHAモジュールとして利用しているため、フォームにCAPTCHAを使用する前にReally Simple CAPTCHAプラグインをインストールする必要があります。

Word Prsessのダッシュボード「プラグイン」→「新規追加」→キーワードに「Really Simple CAPTCHA」と入力し「今すぐインストール」をクリックします。

2-2.reCAPTCHAのAPIの登録

まず、Googleアカウントにログインした状態で、recaptchaにアクセスして下さい。

すると、reCAPTCHAのAPIを使用する登録画面が表示されます。

画面になります。

2-2-1.Labelに詳細を設定する

Labelにサイト名と貴方が使用している表題を入力します。

2-2-2.Choose the type of reCAPTCHAを設定する

 

簡単に表示させたいので、reCAPTCHA V2のチェックボックスにチェックします。

2-2-2-1.reCAPTCTC V2とInvisible reCAPTCHAの内容

reCAPTCHA v2

reCAPTCHA v2は、ユーザーがロボットではないことを示すチェックボックスをクリックする必要があります。これにより、ユーザーはすぐに(CAPTCHAなしで)ユーザーに渡されるか、ユーザーが人であるかどうかを確認するようにユーザーに挑戦します。これは、統合するための最も簡単なオプションで、チェックボックスを表示するには2行のHTMLしか必要ありません。

Invisible reCAPTCHA

Invisible reCAPTCHAは、見えないRECAPTCHAでユーザーがチェックボックスをクリックする必要はなく、ユーザーがサイトの既存のボタンをクリックしたときに直接呼び出されるか、JavaScript API呼び出しによって呼び出すことができます。reCAPTCHA検証が完了すると、統合にJavaScriptコールバックが必要です。デフォルトでは、最も疑わしいトラフィックだけがキャプチャを解決するように促されます。この動作を変更するには、詳細設定でサイトのセキュリティ設定を編集します。

 

2-2-3.ドメインを設定する

Domeinsには、WordPressで使用しているブログのドメインを指定します。

ドメインはWord Pressの「設定」→「一般」からも確認できます。

例:WordPress アドレス (URL)が「https://xn--68j3b2d8le4af20azcz743e.com」

であれば、ドメインは「xn--68j3b2d8le4af20azcz743e.com」になります。

2-2-4.利用規約に同意する

Accept the reCAPTCHA Terms of Service(サービスのreCAPTCHAの利用規約に同意します。)

2-2-5.登録します。

「Register」をクリックします。

すると次の画面が表示されます。


表示されたサイトキーとシークレットキーをメモしておいて下さい。

2-3.reCAPTCHAをWord Prsess に設定する

 

これからreCaPTCHAで所得したSite keyとSecret keyをWord Pressに登録します。

2-3-1.インテグレーションにキーを設定する。

WordPressの管理画面に戻り、「お問い合わせ」メニューの中にある「インテグレーション」メニューをクリックして下さい。

次に、キーを設定するをクリックします。

 

メモしておいたサイトキーとシークレットキーを入力し「保存」をクリックして下さい。

2-3-2.コンタクトホームを編集する。

コンタクトフォームの編集画面を開き、「reCAPTCHA」ボタンをクリックして下さい。

CAPTCHAの設定画面が表示されます。テーマやサイズを選択して下さい。

フォームに[recaptcha]を記述して保存して下さい。

これで終わりです。

Twenty Seventeenタイトル見出しの装飾方法

前回に引き続き子テーマを使ったTwenty Seventeenのカスタマイズ方法を記載します。

カテゴリーから選択した時に一覧で表示されるtitleと本文との境目がわかりずらかったので装飾してみました。

投稿記事のtitleや固定ページの記事titleをtemplate-partsを使ってカスタマイズします。

 

1.投稿記事タイトルを子テーマを使ってカスタマイズします

 

WordPressをインストールしたディレクトリ=「ご自分のドメイン名のディレクトリ(フォルダ)」→「Public_html」→「wp-content」→「themes」→「twentyseventeen」→「template-parts」→「page」の順にタブルクリックします。すると、content-front-page.phpのファイルの中に下記のように記途されていると思います。

親テーマの34行目の

<?php the_title( ‘<h2 class=”entry-title”>’, ‘</h2>’ ); ?>

の部分にcssで装飾できるように<span>タグを使って囲みます。

↓Before

↓After

 

1-1.ファイルをメモ帳などに一旦保存します。

ファイルをメモ帳に保存する時の注意点
ファイル名・・「content-front-page.php」と入力

ファイルの種類・・「すべてのファイル」を選択

文字コード「UTF-8」を選択して保存

1-2.FFFTPソフトで子テーマにアップロードします。

・FFFTPソフトのツールバーの「UTF-8」をクリック。

・下画像の右側(ホスト側)に「content-front-page.php」のファイルをドラッグ&ドロップしてアップロードします。

・アップロードする場所は、WordPressをインストールしたディレクトリ=「ご自分のドメイン名のディレクトリ(フォルダ)」→「Public_html」→「wp-content」→「themes」→「twentyseventeen-child」→「template-parts」→「page」フォルダの中です。

 

 

1-3.子テーマのスタイルシート(style.css)に追記します。

「外観」→「テーマの編集」からstyle.cssをカスタマイズ

↓仕上がりの画像はこんな感じです。

 

配色は、ご自分のサイトに合わせてカスタマイズして下さい。

最後に更新を押して終了です。

 

2.固定ページの記事タイトルを子テーマを使ってカスタマイズします

 

WordPressをインストールしたディレクトリ=「ご自分のドメイン名のディレクトリ(フォルダ)」→「Public_html」→「wp-content」→「themes」→「twentyseventeen」→「template-parts」→「post」の順にタブルクリックします。するとcontent.phpのファイルの中に下記のコードの記途があると思います。

これも先ほどと同じように親テーマの35行目の

the_title( ‘<h1 class=”entry-title”>’, ‘</h1>’ );

の部分にcssで装飾できるように<span>タグを使って囲みます。

↓Before

 

↓After

2-1.ファイルをメモ帳などに一旦保存します。

ファイルをメモ帳に保存する時の注意点
ファイル名・・「content.php」と入力

ファイルの種類・・「すべてのファイル」を選択

文字コード「UTF-8」を選択して保存

2-2.FFFTPソフトで子テーマにアップロードします。

・FFFTPソフトのツールバーの「UTF-8」をクリック。

・下画像の右側(ホスト側)に「content.php」のファイルをドラッグ&ドロップしてアップロードします。

・アップロードする場所は、WordPressをインストールしたディレクトリ=「ご自分のドメイン名のディレクトリ(フォルダ)」→「Public_html」→「wp-content」→「themes」→「twentyseventeen-child」→「template-parts」→「post」フォルダの中です。

2-3.子テーマのスタイルシート(style.css)に追記します。

「外観」→「テーマの編集」からstyle.cssをカスタマイズします。

↓仕上がりはこんな感じで上に細いラインと下に少し太めのラインを入れてシンプルに仕上げてみました。

 

 

 

3.カテゴリー別に記事タイトルをカスタマイズする

カテゴリー別にしたいときは、子テーマのCSSに追記します。

.category-46→この数字はカテゴリーのIDです。

 

投稿→カテゴリーをクリックするとこれまで作成したカテゴリー一覧が表示されます。

IDを確認したいカテゴリータイトルをマウスオーバー(マウスカーソルを上に重ねる)してみましょう。すると、ブラウザのステータスバーにURLが表示されます。

このURLの中にある、ID=46&postの部分の数字が、このカテゴリーのIDになります。

※ステータスバーが表示されないとき
ブラウザの種類や設定内容によっては、ステータスバーが表示されない場合があります。そのときは、カテゴリー一覧画面でカテゴリーの名前をクリックして、カテゴリーの編集画面を開いてみましょう。このとき、ブラウザのアドレスバーに表示されるURLの中にあります。
 

Twenty Seventeenコピペで実装できるサンプル集

WP【Twenty Seventeen】初心者でも簡単にできる!タイトル見出しサンプル集22選

【WordPress】初心者向け1記事に装飾枠を付けるサンプル

WordPressのテーマTwenty Seventeenで子テーマを作った一覧

4月20日にWordPress4.7.4が公開されTwenty Seventeenも4月18日にVersion upの更新情報が届いてましたね。

さっそくWordPressと私が使っているTwenty Seventeenのテーマを最新バージョンに更新しました。

実は、このフォルダ階層でちょとはまりましたので記載します。

1.子テーマを作るときのフォルダ階層一覧

 

まず、FFFTPソフトでサーバーにアクセスするとご自分のドメインがあります。これがWordPressをインストールしたディレクトリです。

※フォルダの作成方法がわからない方はWordPress初心者向け「Twenty Seventeen子テーマの作り方」で紹介してますので参考にしてください。

1-1.Twenty Seventeen-childのフォルダを作る

WordPressをインストールしたディレクトリ=「ご自分のドメイン名のディレクトリ(フォルダ)」→「Public_html」→「wp-content」→「themes」の順にタブルクリックします。

 

twentyseventeenのフォルダが表示されている状態でtwentyseventeen-childをつくります。

 

1-2.template-partsのフォルダとfooterのフォルダを作る

・twentyseventeen-childのフォルダをダブルクリックしてこの中に「template-parts」のフォルダを作ります。

・次にtemplate-partsをダブルクリックし「footer」のフォルダを作ります

これでフォルダ作成は終わりましたので次にファイルを作ります。

 

2.Twenty Seventeen-child子テーマのファイルを作る

前回の記事でも紹介しましたが、今回は、一覧として表示したいと思います。

2-1.基本となるstyle.cssを作る

まず、スタイリストシートの必須項目となる部分を作ります。

その次に追加したい項目があればこの後に記途します。

私が子テーマのスタイリストシートに追加したのは、

2-1-1.リンク色とホバー色の変更

これは、親テーマのlinksの部分のみをコピーして下記のように加工したものです。

・リンク色の変更

①文字の色を黒【color; #222】→青【color: #0000FF;】に変更
②下線の色を黒【rgba(15, 15, 15, 1);】→青【rgba(0, 0, 255, 1);】に変更

・ホバー色の変更

①【color: #000;】をオレンジ【color: #FF8000;】のタグに変更。

②【rgba(0, 0, 0, 1)】 の部分を同様のカラータグ【255, 128, 0, 1】にします。

 

※この部分の変更はTwenty Seventeen のリンク色を変更する方法で詳しく記載しています。

ご自身に会う色で変更してください。

2-1-2.ページサイズを1200幅に変更

 

2-1-3.<h2>見出しの装飾

左に青の下線が入り見出しの背景に少し色を入れたパターンです。

↓   ↓


CSSを追加した後に投稿ページで下記2パータンのいずれかで入力。

①ビジュアルモードで「段落」からh2を選択する

②テキストモードで<h2>ここに文字を入れる</h2>

 

2-1-4.<h3>タグを使った見出しの装飾

下に青の下線が入ったタイプです。

 ↓   ↓

CSSを追加した後に投稿ページで下記2パータンのいずれかで入力。

①ビジュアルモードで「段落」からh3を選択する

②テキストで<h3>ここに文字を入れる</h3>

※保存場所は「twentyseventeen-child」フォルダの中です。

2-2.functions.phpを作る

注意:functions.phpに記途する場合空白があったり、編集を間違えると画面が真っ白になったり、RSSなどうまく機能しなくなったりしますので気をつけてください。

※保存場所は「twentyseventeen-child」フォルダの中です。

 

2-3.header.phpを作る

HTMLタグ、Adsenseのコードなどを親テーマに入力している場合は親テーマのhwader.phpをコピーして子テーマに保存します。

※保存場所は「twentyseventeen-child」フォルダの中です。

2-4.site-info.phpを作る

フッターのproudly powered by wordpress表記をCopyright (C)にカスタマイズしたデータを保存する時に使用しますが、

元のデータは

 

となっており13~14行目を削除しこれをコピーライトに変更する時に使用します。

 

※このファイルの保存場所は、「twentyseventeen-child」→「template-parts」→「footer」のフォルダの中に「site-info.php」のファイルを保存してください。

次回は、タイトル見出しの装飾方法を子テーマを使用して解説します。

 

WordPress初心者向け「Twenty Seventeen子テーマの作り方」

先日、子テーマについて記載したのですが、本日は、子テーマの作成方法について記載したいと思います。

子テーマを何故作るのか?

 

親テーマを直接変更した場合、そのテーマがアップデートされると変更が失われるかもしれませんが、子テーマを使用すれば親テーマがアップデートされても子テーマは確実に保持されますので、自分がカスタマイズした内容が保持できます。

 

1.子テーマの作り方

 

子テーマを作るのには、サーバーで直接作る方法とFFFTPソフトを使って作成する方法がありますが、今回はFFFTPソフトを使って作成する方法を記載します。

FFFTPソフトのイントール方法や初期設定がわからない方はsynclogue-navi.comさんに設定方法など記載がありますので参考にして下さい。

1-1.FFFTPソフトを使ってフォルダを作ります。

 

FFFTPソフトでサーバーに接続します。
WordPressがインストールされているフォルダをダブルクリック→「Public_html」→「wp-content」→「themes」の順にダブルクリックすると以下のフォルダーが表示されます。

 

上の画像表示の状態でFFFTPソフトのツールバーの中にあるフォルダ作成をクリック↓

 

ポップアップ画面に「twentyseventeen-child」と入力し「OKをクリック」

 

するとtwentyseventeenの下にtwentyseventeen-childのフォルダができます。

 

フォルダ作成はこれで完了です。

※子テーマディレクトリの名前には最後に ‘-child’ を付けることが推奨されますが、必須ではありません。

1-2.子テーマを有効にするため最低限のファイルを作る

子テーマを有効にする為にはstile.cssfunctions.php

この2つのファイルが最低限必要です。

 

1-3.style.cssを作る

Search Console(旧:ウェブマスターツール)構造化エラーの対処方法でも記載しましたがSearch Consoleの構造化データーにエラーがでましたので

WordPress codex日本語版を参考にさせていただきました。

※style.cssに追加する場合以下のコードの後に記途してください。

 

Twenty Seventeen Version1.1をお使いの方でフォルダ名をtwentyseventeen-childと付けられた方は、

Theme URI: http://テーマのURL/
Author: 子テーマの作者名
Author URI: http://←テーマ作者のサイト

この3項目をご自分用に書きかえればOKです。

メモ帳に貼り付けて、ディスクトップなどわかりやすい場所に保存してください。

ファイルを保存する時の注意点
ファイル名・・「style.css」と入力

ファイルの種類・・「すべてのファイル」を選択

文字コード「UTF-8」を選択して保存

 

するとstyle.cssが下の画像のようにディスクトップにできているのが確認できます。

 

フォルダに保存した場合の画像

 

ディスクトップに保存した場合の画像

 

1-4.functions.phpを作る

functions.phpに、親テーマのスタイルシートを呼び出す記述を書き込みます。

※functions.phpに機能を追加する場合は、” ?> “の前に記途して下さい。

ファイルを保存するときの注意点
ファイル名・・「functions.php」と入力

ファイルの種類・・「すべてのファイル」を選択

文字コード「UTF-8」を選択して「保存」

注意:functions.phpに記途する場合空白があったり、編集を間違えると画面が真っ白になってしまいます。必ずバックアップを取って下さい。

 

フォルダに保存した場合の画像

ディスクトップに保存した場合の画像

2.ファイルをFFFTPソフトでアップロードする。

 

次に、作成したこの2つのファイルをFFFTPソフトを使ってアップロードしていきます。

・FFFTPソフトにサーバーに接続します。

・WordPressがインストールされているフォルダをダブルクリック→「Public_html」→「wp-content」→「themes」→「twentyseventeen-child」の順にダブルクリックします。

・FFFTPソフトのツールバーの「UTF-8」をクリック。

・下画像の右側(ホスト側)にstyle.cssとfunctions.phpのファイルをドラック&ドロップします。

 

ホスト側に下の画像のようにstyle.cssとfunctions.phpのファイルがアップロードされているのを確認します。

 

これでFFFTPソフトの使用は終わりです。
FFFTPソフトは使い終わったので閉じちゃってください。

これから最後の総仕上げ(^^♪もうちょっとだよ~!頑張って!!

 

3.子テーマを有効化する

Word Press にログインし、「外観」→「テーマ」の順にクリックします。

 
これで終わりです。参考にしていただければ幸いです。