ウェブサイト構築に焦点を当てたWordPressブログとして、コメントでコードスニペットを貼り付けたり、コードの一部を共有したい読者に時折遭遇します。
しかし、WordPressにはコメント、投稿、またはページ用のシンタックスハイライト機能が組み込まれていないため、コメント投稿者とコードを理解しようとしている他の読者の両方にとって、扱いにくい場合があります。
幸いなことに、この問題を解決する簡単な方法が見つかりました。この記事では、WordPressのコメントにシンタックスハイライトを簡単に追加する方法を紹介します。
WordPressのコメントでシンタックスハイライトが必要な理由と時期
シンタックスハイライトは、コードを見やすく、理解しやすくするための方法です。コードスニペットに色や行番号を追加し、読みやすくします。例を挙げます。
<html>
<head>
<title>My Awesome Website</title>
</head>
<body>
<h1>Welcome to My Homepage</h1>
</body>
</html>
ウェブ開発やコーディングに関するWordPressブログをお持ちの場合、WordPressのコメントに構文ハイライトを有効にすることが重要です。これにより、読者はコードを読みやすい方法で簡単に記述できます。
これにより、読者はより多くのコメントを残し、独自のコードスニペットを共有するようになります。コメントがより面白くなるだけでなく、コミュニティのエンゲージメントの感覚も構築されます。
さらに、読者が助けを必要としている場合、コメントにコードを視覚的に魅力的で、他のコメント投稿者にとって理解しやすい方法で簡単に挿入できます。
それを念頭に置いて、WordPressウェブサイトのコメントフォームに構文ハイライトを追加する方法を見てみましょう。
ステップ1：Syntax Highlighter Evolved プラグインのインストール
WordPressに構文ハイライトを追加する最も簡単な方法は、Syntax Highlighter Evolvedプラグインを使用することです。使い方は非常に簡単で、WordPressの投稿、ページ、コメントで構文ハイライトを有効にすることができます。
WPBeginnerでは、このプラグインを使用してコードスニペットを挿入および表示しています。詳細については、Syntax Highlighter Evolvedを使用する理由に関する記事をお読みください。
まず、Syntax Highlighter Evolvedプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
完了したら、投稿またはページを編集して、構文ハイライターを使用してコードを追加できます。ブロックエディターでは次のようになります。
WordPressでコードを表示する方法に関する記事で、Syntax Highlighter Evolvedプラグインの使用方法について詳しく学ぶことができます。
デフォルトでは、Syntax Highlighter Evolvedは訪問者がコメントにコードを追加できるようにしますが、そのコードはショートコードで囲む必要があります。
これらのショートコードは、すべての人気のあるプログラミング言語およびスクリプト言語にちなんで名付けられています。これは、コメント投稿者が単に言語名を含む角括弧でコードを囲むだけでよいことを意味します。
例えば、PHPコードを含むコメントを投稿したい場合は、次のようにします。
Hi everyone. I need help with this PHP code: [php]
<?PHP
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
[/php]同様に、HTMLコードをコメントとして投稿したい場合は、HTMLショートコードで囲む必要があります。
Hey there! Could anyone check this code snippet? [html]<a href="https://example.com">Demo website>/a>[/html]この設定が難しいのは、ユーザーがこれらのショートコードで構文ハイライトを使用できることを知らないことです。そのため、通知メッセージで知らせる必要があります。
ステップ2：コメントフォームにシンタックスハイライト通知を追加する
コメント投稿者に構文ハイライト機能について知らせるには、コメントフォームの上に次のような通知メッセージを追加する必要があります。
これを行うには、WordPressサイトにカスタムコードスニペットを追加します。
このチュートリアルを読んでいるのがコーディングブログのためであれば、おそらくコーディングにはかなり慣れているでしょう。
それでも、最も高度なユーザーでも、すべてのコードスニペットを把握するのは難しい場合があります。適切に管理しないと、一般的なWordPressのエラーが発生したり、サイトが完全に破損したりする可能性があります。
そのため、カスタムコードスニペットを挿入するには WPCodeを使用することをお勧めします。これは、WordPressのコアファイルを編集することなく、WordPressにカスタムコードを追加する最も簡単で安全な方法です。
注意: WPCodeの無料版も利用可能ですが、スマート条件付きロジック、コードスニペットのクラウドライブラリへのアクセスなどを利用できるため、WPCodeのPro版の使用をお勧めします。
まず最初に行う必要があるのは、WPCodeプラグインをインストールしてアクティブ化することです。詳細については、 WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化したら、コードスニペット » + スニペットを追加に移動してください。
ここでは、WordPressウェブサイトに追加できる既製のスニペットをすべて確認できます。
独自のコードスニペットを追加したいので、「カスタムコードを追加（新しいスニペット）」にカーソルを合わせ、次に「+カスタムスニペットを追加」をクリックします。
まず、カスタムコードスニペットのタイトルを入力します。これは、スニペットを識別するのに役立つものであれば何でも構いません。
次に、「コードタイプ」ドロップダウンを開き、「PHPスニペット」を選択します。
次に、次のスニペットをコードエディタに貼り付けるだけです。
function wpbeginner_comment_text_before($arg) {
// Add a custom notice to inform users about using shortcodes for syntax highlighting
$arg['comment_notes_before'] .= "<p class='comment-notice'>You can use shortcodes for syntax highlighting when adding code. For example, or </p>";
// Return the modified comment arguments
return $arg;
}
// Add the filter to apply the custom comment modification function
add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');
その後、「場所」ドロップダウンを開き、「すべてで実行」をクリックします。
次に、画面の上部までスクロールして、「非アクティブ」トグルをクリックし、「アクティブ」に変更します。
最後に、「スニペットを保存」をクリックしてスニペットを公開します。
このコードは、WordPressのコメントフォームのコメントフィールドの上に通知を表示するだけです。ただし、アカウントにログインしている間はこのテキストは表示されないため、シークレットモードで新しいブラウザウィンドウを開くか、アカウントからログアウトする必要があります。
ショートコードが実際に機能するかどうかを確認したい場合は、シークレットモードでウェブサイトにアクセスし、ブログ投稿にコメントして、ショートコードを使用してください。コメントが承認済みになり承認されると、次のようになります。
コメントエンゲージメントを高めるその他の方法を学ぶ
シンタックスハイライト機能を有効にすることは、ウェブ開発ブログを持っている場合にコメントエンゲージメントを高める唯一の方法ではありません。
別のヒントとして、コメントに「いいね」と「いいね」を追加することもできます。これにより、読者は特定のコメントに対する意見を簡単に表明できます。これにより、議論が活発になり、コミュニティからの貴重な貢献が強調されます。
また、コメントへの返信があった際にユーザーに通知することもできます。これにより、会話への参加意欲を維持し、再訪を促します。
さらに、コメントフォームにカスタムフィールドを追加することも検討してください。読者がコメントとともに、使用しているプログラミング言語やフレームワークのバージョンなどの特定の情報を提供できるようにしたい場合に役立ちます。
コメントエンゲージメントを高めるために実装できるその他のヒントを以下に示します。
この記事がWordPressコメントにシンタックスハイライトを追加するのに役立ったことを願っています。また、WordPressコメントに動画などを追加する方法や、おすすめのWordPressコメントプラグインに関するガイドもご覧ください。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
イジー・ヴァネック
スニペットを使用した可能性を示していただきありがとうございます。すでにサイトにかなりの数のプラグインがあり、それを実行する必要があります。同時に、テクノロジーブログを運営しているため、ユーザーがコメントでコードをハイライトできるようにしたいと考えていました。重要な役割を果たす他のスニペットにはWP Codeを使用しているため、スニペットでこれを行う機能は非常に役立ちます。もう一度ありがとうございます。他のサイトのためにも、このスニペットをコードライブラリに保存します。
Yves
最終更新日：9ヶ月前。最新のWordPressバージョンではテストされていません。
WPBeginnerサポート
そのテストされていない警告については、以下の記事をご覧ください。
https://www.wpbeginner.com/opinion/should-you-install-plugins-not-tested-with-your-wordpress-version/
管理者
セス
ナイスで非常に有益な記事です。アップデート通知をオンにしました。良い記事です。
WPBeginnerサポート
Glad our article was helpful
管理者