コメントは、インターネット上にコミュニティを構築する上で重要な役割を果たします。 コメントは、読者が自分の考えを共有できるようにするための対話のプラットフォームを提供します。

ユーザーにブログにコメントを残すように促す方法はいくつかあります。 それらの方法のXNUMXつは、美しく、使いやすく、アクセスしやすいコメントフォームを作成することです。

このチュートリアルでは、デフォルトのWordPressコメントフォームのスタイルを設定する方法、ソーシャルメディアIDを介してコメント機能を追加する方法、コメントサブスクライブ機能を作成する方法などを示します。もっと。

しかし、前に、WordPressをインストールしたことがない場合は、 WordPressのブログ7の手順をインストールする方法 et あなたのブログにワードプレスのテーマを、見つけインストールしてアクティブにする方法 

それから私たちがここにいる理由に戻りましょう。

コメントワードプレスのスタイルを変更する方法

私たちがスタイルについて話すとき、私たちは 事のCSS側。 以下に、WordPressのコメントフォームの外観をカスタマイズする方法を示します。 WordPressのデフォルトの各要素にはCSSコードがあります。これは、コメントのリストの場合です。 ナビゲーションメニュー、コメントフォーム、 ウィジェット そしてより多くの。

のファイルの中には WordPressテーマ、という名前のファイルがあります comments.php これは、ブログの投稿やページにコメントやコメントフォームを表示するために使用されます。 WordPressコメントフォームを表示するには、「 comment_form() 使用されます。

発見 WordPressのログインページへのリンクを見つける方法

デフォルトでは、この関数は、コメントコンテンツ用のXNUMXつのテキストフィールド(名前、電子メール、Webサイト)、大きなテキストボックス、および送信ボタンを含むコメントフォームを生成します。

デフォルトのCSSクラスと識別子を操作するだけで、これらの各要素を簡単に変更できます。 これは、WordPressが各コメントフォームに追加するデフォルトのCSSクラスのリストです。

#respond {#}返信タイトル{#}取り消し方法返信リンク{} {} #commentform #author #email {} {} {} #URLある#Comment #submit .comment注意{} {} .required .how-フォーム作者{} .comment-フォームメール} {.how-フォームURL} {.how-フォームどのように{} .FORM-許さタグ{} .FORM提出

これらのCSSクラスを調整するだけで、コメントフォームの外観を完全に変更できます。 何かを変えて、私たちに何ができるかを考えてみましょう。

発見 WordPressにSSLをインストールした後に画像リンクを置き換える方法

まず、フォームのアクティブなフィールドを強調表示することから始めます。 アクティブなフィールドを強調表示することで、ユーザーは変更内容を簡単に確認でき、Webサイトに少し動的な側面を与えます。

#respond {背景:#ececec。 パディング:0 5 0px 5px。 } / *強調アクティブなテキストフィールド* / #respond入力[タイプ=テキスト] TEXTAREA {-webkit転移:すべて0.30sが緩和・イン・アウト。 -moz-遷移:全て0.30sが緩和・イン・アウト。 -ms転移:すべて0.30sが緩和・イン・アウト。 -o-遷移:全て0.30sが緩和・イン・アウト。 概要:なし。 パディング:3px 0px 3px 3px。 マージン:5px 1px 3px 0px。 国境:固体1pxの#dddddd。 } #respond入力[タイプ=テキスト]:フォーカス、TEXTAREA:フォーカス{ボックスシャドウ:0 0 5pxのRGBA(81、203、238、1)。 マージン:5px 1px 3px 0px。 国境:固体1pxのRGBA(81、203、238、1)。 }

Twenty Twelveでのコメントフォームは次のとおりです。

ハイライト活性型フィールド

これらのクラスを使用すると、フィールド内でのテキストの表示方法を変更できます。 これは、次の例で行うことです。

#author {フォントファミリ:ロブスター「ロブスター1.4」、「ドロイドサンセリフ」、ゴシック。 フォントサイズ:16px。 色:#1d1d1d。 文字間隔:.1em。 #URL} {色:#21759b。 フォントファミリ:「Luicidaコンソール」、「宅配便新」、「宅配便」、ミニバン。 } 

前のコードが生成する結果は次のとおりです。

どのように-フォーム入力スタイル

コメントフォームボタンのスタイルを変更することもできます。 次の例では、グラデーションの背景を指定します。

#submit {フォントファミリー:ゴシック。 色:#FFFFFF; フォントサイズ:20px。 パディング:10px。 テキスト装飾:なし; ボックスシャドウ:0px 1px 3px #666666。 -webkit-ボックスシャドウ:0px 1px 3px #666666。 -moz-ボックスシャドウ:0px 1px 3px #666666。 テキストの影:1px 1px 3px #666666。 背景:-webkit-勾配(線形に(#0ad0)(#0)から100 006、4 003366の%); 背景:-moz-線形勾配(上部、#006ad4、#003366)。 } #submit:ホバー{背景:-webkit-勾配(線形に(#0)(#0ad0)から100 003366、006 4の%); 背景:-moz-線形勾配(上部、#003366、#006ad4)}

表示される結果は次のとおりです。

どのように提出ボタン

コメントにソーシャルインタラクションを追加する方法

WordPressコメントフォームにソーシャルログインを追加することから始めましょう。 最初に行う必要があるのは、プラグインをインストールしてアクティブ化することです ソーシャルログイン

発見 ワードプレスでプラグインをインストールする方法 このプラグインをアクティブ化するには、次のアドレスにアクセスして無料のアカウントを作成する必要があります:https://app.oneall.com

それが完了すると、ユーザーがネットワークを介して接続できるようにするために、使用するすべてのネットワークに対してAPIを構成する必要がなくなります。

さまざまなソーシャルネットワークのAPIは絶えず変化していますが、何もする必要はありません。このプラグインの開発者がAPIを更新します。 OneAllAPIにログインするだけです。

これがフォームの表示方法です。

WordPress 2フィードバックフォームをカスタマイズする方法ワードプレスのコメントフォームをカスタマイズする方法 

プレミアムWordPressプラグインもご覧ください  

他にも使えます WordPressのプラグイン モダンな外観を与え、ブログやウェブサイトの取り扱いを最適化します。

ここでは、そのためのプレミアムWordPressプラグインを提供しています。

1.WPインスタント検索と自動提案

「WPインスタント検索と自動提案」プラグインを使用すると、WordPressブログを検索するときに、記事、ページ、カスタム投稿タイプの提案を即座に取得できます。 それはで動作します WPBakery et 礎石. WP-時間検索ワードプレス・プラグインのための検索

その機能は次のとおりです。全画面モードで検索、rカスタムタイプの出版物の即時検索、次との互換性 視覚的な作曲家、T3つの統合されたデザインスタイル、5カラースキームから選択、pキーボードとマウスのサポート、eパラメータなどで完全にカスタマイズ可能..。

ダウンロード | デモ | ウェブホスティング

2。 404エラーページホームページまたはカスタムページへのリダイレクト

これを有効にした後、訪問者をホームページまたはカスタムページにリダイレクトする 404 エラーページを簡単に追加する最良の方法の XNUMX つを次に示します。 WordPressのプラグイン.404エラーページはホームページまたはカスタムページにリダイレクトします

すべての 404 エラー ページは、ホームページまたはカスタム URL にリダイレクトされます。 これを使うことで WordPressのプラグイン、多くの 404 エラー ページがある場合、Google が Web サイトのページランクを下げることを許可します。

Ce WordPressのプラグイン はリダイレクトを実行するだけでなく、検索エンジンの結果における Web サイトのランキングを向上させるための適切なソリューションでもあります。

ダウンロード | デモ | ウェブホスティング

3。 プロ関連記事 

関連記事Proは、WordPressのあらゆる種類の同様のコンテンツに対してシンプルでありながら強力なソリューションを提供します。 カスタム投稿タイプ、マルチサイト、カテゴリ、混合コンテンツ、カスタムコンテンツなどをサポートしています...関連投稿プロ

とりわけ提供する機能として: 3のさまざまなタイプのレイアウト、 各レイアウトの65定義済みテンプレート、コーディングは不要、tのサポートブラウジングと自動再生、互換性 プラグインで使用されるカスタム投稿タイプを使用 WooCommerce、WP eコマース、 bbPress など...、 検索バー フィルター付き、d非常に説明的なドキュメントなど。

ダウンロード | デモ | ウェブホスティング

推奨リソース

ウェブサイトの構築と管理に役立つ他の推奨リソースをご覧ください。

まとめ

ここに ! このチュートリアルは以上です。 この記事が、フィードバックフォームをより魅力的なものにするのに役立つことを願っています。 WordPressのカスタマイズ、特にカスタマイズに関するヒントもお気軽にお知らせください。 お気に入りのソーシャルネットワークでこの記事を友達と共有する

しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログの作成。

提案や意見がある場合は、セクションに残してください commentaires.

...