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]を記述して保存して下さい。

これで終わりです。

WPをXサーバーのmod_pagespeed設定とSSL化と.htaccessファイル編集で高速化した方法

最近サイトの表示速度がかなり遅いと思いPageSpeed Insightsで調べてみるとモバイルでは19点とかなり悲惨な結果が表示されました。

そこで、今回は2週間程色々試してみた結果プラグインを使わずXサーバーのmod_pagespeed設定&SSL化&.htaccessファイル編集で高速化を図りました。

現在の使用している環境は、

  • Xサーバー
  • WordPress4.7.4
  • テーマは Twenty Seventeen1.2を使用しています。

修正が必要とされる項目としては

  • 画像を最適化する
  • 圧縮を有効にする
  • ブラウザのキャッシュを活用する
  • サーバーの応答時間を短縮する

この4項目です。

1.Xサーバーでmod_pagespeed設定をする

 

1-1.mod_pagespeed設定とは

Google社により開発された拡張モジュール「mod_pagespeed」を使用して、Webサイトの表示速度を向上させる機能のことで以下の高速化が期待されます。

  • CSSファイル、JavaScriptファイルなどの圧縮
  • 最適な画像タイプへの変換、軽量化
  • 同種のファイル(画像、CSS、JavaScriptファイルなど)を一つにまとめ、サーバーとクライアント間の無駄な通信(リクエスト)を削減
  • CSSファイル、JavaScriptファイル、画像ファイルのキャッシュ有効期間の延長
  • 小さなファイルサイズのCSSやJavaScriptをHTML内に埋め込む

 

1-2.mod_pagespeed設定方法

Xサーバーのmod_pagespeed設定にも記載がありますが、手順を記載しておきます。

  • Xサーバーのサーバーパネルにログイン
  • mod_pagespeed設定をクリック
  • mod_pagespeed設定を行う対象ドメインを選ぶと現在の設定が「OFF」表示されますので、ONにするをクリックしてください。

  • mod_pagespeed設定の変更が完了しましたのメッセージが表示されますので、戻るをクリックします。

  • 最後にmod_pagespeed設定が変更になっているか確認してください。

Xサーバーのmod_pagespeed設定はこれで終わりです。

参考の為、この設定で、モバイルの設定は19点→34点になりました。

次に、キャッシュ設定をします。

2.htaccess編集でキャッシュの設定をする

 

2-1.htaccess編集する前の注意事項

  • .htaccessのファイルのテキストエディタなどを使用し現在の.htaccessのバックアップを必ずとってください。参考の為に・・私がWordPressをmod_pagespeed設定をする前はこんな感じでした。
これは、WordPressのパーマリンク設定で利用しているmod_rewriteです。

2-1-1.WordPressのパーマリンク設定の mod_rewrite内容

これは利用環境でmod_rewriteが利用できるかどうかを確認しています。「もし、mod_rewriteが利用できる時は下記を実行してください。」
これはmod_rewriteの機能を有効化するという記述になります。
これはRewrite処理後にベースとなるURLの指定しています。

「%{REQUEST_FILENAME}」というものが、「!-f」という条件を満たしていれば真となります。
「!-f」の場合はファイル以外の場合は、真を返し、ファイルの場合は偽を返します。
また、先ほどと同じような記述がされていて、条件の部分のみ変更されています。
「-d」と記述されていますが、これはディレクトリかどうかの確認を行います。
これはURLが「.」であれば「/index.php」を参照するという命令です。

[L]という記述がありますが、これはLastという意味で「この記述以降の他のルールは適用しません。」という命令です。
これは最初に記途した<IfModule mod_rewrite.c>の最終を指定する記途で「ここまでですよ」と締めくくる記途になります。

ちなみにわかりやすく内容をまとめると、

  • mod_rewriteモジュールを使用出来る。
  • ファイルが存在しない。
  • ディレクトリが存在しない。

という上記にあるすべての条件に当てはまるリクエストは、すべて「/index.php」を参照して下さい。

という条件式の記途になります。

2-1-2.mod_pagespeed設定後の.htaccess

mod_pagespeed設定をした後は、ModPagespeed On が下記のように13行目に追加されていました。

  • Xサーバーでは、WordPressなどのプログラムによる記述が自動的に行われている場合がありますので、心当たりがない記述であっても不用意に削除なされないようにご注意して下さい。

    また、この機能を利用した場合は文字コードが「EUC-JP」として保存されますので.htaccessのファイルはXサーバーから直接編集することをおすすめします。

     

    2-2.Xサーバーで.htaccessを編集してキャッシュを有効にする

    .htaccessの基本的な使い方はXサーバーのマニュアルにございますのでここでは割愛します。

    .htaccessのファイルの中に記途する場所としては、

    # END WordPressのみがある場合は、その下に
    # BEGIN EWWWIOがある場合はその下に下記コードを記途します。

    注意:# BEGIN WordPress~# END WordPressの間はXサーバーで自動で書き換えられる領域になってます。

     

    3.htaccess編集でファイルを圧縮する

    下記のコードを.htaccessに記途します。

     

    ここまで進めても画像の最適化がでる場合は、

  • 保存した画像のファイル名を修正して再度アップロードしファイルを置き換える
  • グーグルマップを埋め込んでいれば、住所にリンクをつけるなどの対処をとりましょうそれでは、次にSSL設定です。

    4.XサーバーでSSLを導入したドメインをhttpsに正規化する

     

    4-1.XサーバーでSSLの申し込み

    主な手順としては、Xサーバーのサーバーパネルに「ログイン」→「SSL設定」をクリック→設定するドメインを選択し、「独自SSL設定を追加する(確定)」をクリックしてください。

    詳しい説明は、Xサーバーのマニュアルにございますので割愛します。

    4-2.待つこと約1時間

    Xサーバーに「ドメイン名」に独自SSL設定を追加しました。

    なお、SSL設定が反映するまで、最大1時間程度かかります。今しばらくお待ちください。

    と表示されると思います。設定が完了する前にアクセスしても以下のようなエラーメッセージが表示されます。

    4-3.WordPressの管理画面からURLを変更

    Word Psessの「ダッシユボード」の「設定」→「一般」をクリクします。次にWordPress アドレス(URL)とサイトアドレス(URL)を「http://~」 「https://~」に変更します。最後に「変更を保存」

     

    4-4.canonicalタグで「https~」を指定してURLの正規化

    URLの正規化で非常に重要な役割を果たすのが、canonicalです。

    httpsを優先してもらうため、このようにカノニカルタグでドメインを指定します。
    WordPressなどのテンプレートで指定している場合は、忘れなく変更しておきましょう。

    4-4-1.canonicalの記述方法

    canonicalはhead要素の上部で使います。body要素の中で使っても、Googleは無視して処理してくれないので注意してください。

    head要素の上部で使うことによりHTML構造をクローラーが解析する際に早い段階でクローラーがcanonicalを読んで処理してくれます。ので、下記のようにインデックスに登録させたいほうのURLを記途します。

    1.ドメイン名(○○○○○.com)を、置き換えて下さい

     

    4-5.「http://~」から「https://~」にリダイレクト設定をする

    独自SSLの設定が完了した時点では、自動的に「https://~」のURLへ転送されませんのでサイト内全てのページをhttpsページにリダイレクトさせる方法です。

    その場合.htaccessファイルの最上部に追記します。

    今回、SSLするに当たりon offで迷いましたのでメイビンラボさんの記事を参考に忘れないように記録しておきます。

    .htaccessだけの変更でSSL対応するにはoffにします。

     

    続いて、Xサーバーではwwwありを優先に設定されますので、wwwなしに統一します。

     

    4-6.URLのwwwありをwwwなしに統一

    1.ドメイン名(○○○○○.com)を、置き換えて下さい
    2.通常はバックスラッシュの箇所は「\」が正しいのですが
    環境の問題で「\」が「バックスラッシュ」バックスラッシュになっています。

     

    4-7..htaccessファイルをまとめるとこんな感じです。

    SSL設定後のSearch Console の設定方法

    4-8.内部リンクを修正する

    私は、自分で修正したのですが、テーター量が多いサイト等はプラグインを活用する方法もあります。その際は必ずバックアップをとっておくことを忘れずに!!

    4-8-1.内部リンクの調べ方

    ご自分のサイトの空白部分の上部で右クリックします。

    次に「ページのソースを表示」をクリックします。

    するとページソースが下の画像のように表示されますので「Ctrl+F」キーを押すと検索窓が表示されますので検索窓に修正したいURLを入力します。

    4-8-2.内部リンクを修正した場所

    • ウィジェットに記途しているアドレス
    • ダッシュボードの「外観」→「メニュー」メニュー構造の「ホーム」のカスタムリンク

    • メディアのファイル名は自動で「https://~」に変更されますが、「fancybox for wordpress」プラグインを利用してで拡大表示設定をしている画像をカスタムURLをドロップダウンメニューから選択して「更新」→メディアファイルに変更

     

  • 自分で内部リンク設定しているカスタムURL

上記の4項目を修正しました。

  • 最終結果はPC94点モバイル85点とまずまずの点数になりました
     

 

WordPress4.7.4で動作確認済みのおすすめプラグイン

Word Pressには色々なプラグインがありますが、探すのにかなりの時間がかかったりしますので、今回は、私が実際に試してよかったプラグインを管理画面のプラグイン検索から直接インストールできるものを抜粋しています。

プラグインは入れているだけでも負荷がかかりますので、ご自分のWord Press のテーマに存在する機能のプラグインや重複する機能が付いているプラグインなど選定して最小限度にインストールすることをおおすすめします。

1.WordPrressに必須と思われるプラグイン

 

1-1.WordPress Ping Optimizer

WordPress Ping Optimizer-Word Press Plugins

記事の投稿を編集するたびに送信されるPingを最適化するプラグインです。

WordPressのデフォルト設定では、
記事を修正した時でもその都度Pingが送信されてしまいます。

ピングスパマーとしてタグ付けされるのはあまり好ましくないので是非導入しておきましょう。

WordPress Ping Optimizerの設定方法

1-2.All In One SEO Pack

All In One SEO Pack-Word Press Plugins

SEOに関するカスタム投稿タイプの機能が細かく設定できるプラグインです。

  • 特定の記事・固定ページ、カテゴリページ、タグページのnoindex設定
  • サイトトップページや各ページのtitle・meta description・meta keywordタグの設定
  • Google Analytics、Google Search Consoleのコードの簡易設置
  • SitemapXMLの生成

 

1-3.Contact Form 7

Contact Form 7-Word Press Plugins

お問い合わせフォームを簡単に育成できるプラグイン。

シンプルなコンタクトホーム、でも柔軟。

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

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

1-4.AddToAny Share Buttons

Add ToAny Share Buttons-Word Press Plugins

SNSシェアボタンを簡単に設置できるプラグインです。

  • カウンター機能
  • Floating share buttons
  • 100以上のサービスから選んで表示

 

1-5.Google XML Sitemaps

Google XML Sitemaps-Word Press Plugins

Google、Bing、Yahoo、Ask.comなどの検索エンジンがブログをよりよく索引付けするための特別なXMLサイトマップを生成するプラグイン

すでにAll In One SEO Packをインストールしている場合All In One SEO Packの機能管理からXmlサイトマップをActiveにすればインストール不要です。

 

1-6.Throws SPAM Away

Throws SPAM Away-Word Press Plugins

日本語が存在しないコメントを捨ててしまうコメントスパムプラグイン

コメント内に日本語の記述が存在しない場合はあたかも受け付けたように振る舞いながらも捨ててしまうプラグイン

  • 対応する最新バージョン: 4.7-RC1となってましたが、無事スパムコメントは0になりました。

 

1-7.BackWPup-Word Press Plugins

BackWPup-Word Press Plugins

サイトのデータを設定で定期的に自動でバックアップもしてくれるプラグインです。

  • データベースをバックアップ
  • ファイルバックアップ
  • インストールされたプラグインを使用してファイルを生成します

Word Pressの復元やデータ破損時にバックアップを取っておけば安心です。

 

1-8.001 Prime Strategy Translate Accelerator


001 Prime Strategy Translate Accelerator-Word Press Plugins

WordPressを日本語で表示させる場合には、英語と日本語を対訳させるja.moというファイルを読み込んでいます。
この日本語翻訳ファイルをキャッシュして高速化するプラグインです。

 

2.必要に応じてあると便利なプラグイン

 

2-1.TablePress

TablePress-Word Press Plugins

投稿やページに美しく機能豊富なテーブルを作成してくれるプラグインです。

面倒なHTMLコードを書かずに直感的に作成でき、Excelデータをインポートする機能も付いています。

投稿画面に作成したショートコードをコピペするだけで表示されます。

 

2-2.TinyMCE Advanced

TinyMCE Advanced-Word Press Plugins

ビジュアル・エディタのツールバー上に表示されているボタンを配置し自分の好みでカスタマイズできます。

  • フォントサイズの選択
  • フォントファミリの選択
  • テーブルをExcelデータのようにセルの結合などができます

 

2-3.Crayon Syntax Highlighter

Crayon Syntax Highlighter-Word Press Plugins

HTMLなどのソースコードを記事上に綺麗に表示してくれるプラグイン

複数の言語、テーマ、URL、ローカルファイル、または投稿テキストを強調表示しますので、HTMLやCSS、PHPなどの解説をするサイトや、プログラミング言語を扱うサイトは便利なプラグインです。

  • 対応する最新バージョン: 4.2.0となってましたが、4.7.4で使用した結果動作可能でした。

 

2-4.Hatom/hentry remover

Hatom/hentry remover-Word Press Plugins

Search Consoleの構造化データに役立つプラグインです。

このプラグインはpost_classフィルターで「.hentry」クラスを削除し、単にJavaScriptで再びタグを追加することによって、すべてのテーマをサポートしています。
これは、レイアウトをめちゃくちゃにせずに「構造化データ」のhentryとしてそれをインデックスからGoogleのを防ぐことができます。

  • 対応する最新バージョン: 4.4.9となってましたが、構造化テストで「.hentry」クラスを削除し最終的なエラー数が減少しました。

 

2-5.WordPress Related Posts

WordPress Related Posts-Word Press Plugins

関連記事を簡単に表示できるWordPressプラグイン

記事下などに設定した任意のレイアウトで画像やテキストを表示してくれます。

  • 対応する最新バージョン: 4.6.5となってましたが、4.7.4でも関連表示可能でした。

 

2-6.Redirection

Redirection-Word Press Plugins

パーマリンクを変更したときやサイトを引越ししたときに役立つプラグインです。

301 リダイレクトを管理し、404 エラーをモニターするための WordPress プラグインです。

WordPressパーマリンク変更時に必須なリダイレクト設定方法

 

2-7.Simple Custom CSS

Simple Custom CSS-Word Press Plugins

テーマのCSSを直接編集しなくても、CSSを追加・上書きできるプラグインです。

  • 対応する最新バージョン: 4.4.9となってましたが4.7.4で使用した結果、子テーマのcssをそのままコピペしても大丈夫でした。

2017.6.11訂正 クラス属性(class)で名前を付けて、CSS(スタイルシート)での指定が一部できませんでした。

 

2-8.fancybox for wordpress


FancyBox-Word Press-Word Press Plugins

画像をクリックすると画像を拡大表示してくれるプラグインです。

画像の細かい部分が見やすくなるのでおすすめです。

 

2-9.Table of Contents Plus


Table of Contents Plus-Word Press Plugins

記事の見出しごとに目次を自動で設置してくれるプラグインです。

投稿ペーシに<a href=”#”> </a>などのタグ入力が不要になります。

また、アンカーにジャンプするのではなくスクロールする機能が付いていますのでページ内のリンクに飛ぶとき滑らかにスクロールするプラグインです。

  • 対応する最新バージョン: 4.4.9となってましたが、4.7.4で使用した結果設置は可能です。

 

2-10.Simple Scroll to Top Button


Simple Scroll to Top Button-Word Press Plugins

矢印など10種類のアイコンからボタンの背景色やボタンのサイズを自分の好みで色をカスタマイズできクリックすると記事の上部までスクロールするボタンです。

記事を読み進めた時記事のトップに速く戻れます。

 

2-11.WordPress Popular Posts

WordPress Popular Posts-Word Press Plugins
ウィジェットに人気記事を表示できるプラグインです。

人気の記事をページビュー数やコメント数を基本に、24時間・1週間・30日間・すべての時間単位で表示できるプラグインです。

  • 対応する最新バージョン: 4.6.5となってましたが4.7.4でカスタマイズし、動作確認しました。

Twenty SeventeenでWordPress Popular Postsのサムネイルにタイトルを重ねて表示する方法をコピペでどうぞ

 

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」のファイルを保存してください。

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