ウェブサイト構築に焦点を当てた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プラグインのインストール方法に関するステップバイステップガイドをご覧ください。
完了したら、投稿またはページを編集して、構文ハイライターを使用してコードを追加できます。ブロックエディターでは次のようになります。
Syntax Highlighter Evolvedプラグインの使用方法については、WordPressでコードを表示する方法に関する記事で詳しく学ぶことができます。
デフォルトでは、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の無料バージョンも利用可能ですが、Proバージョンを使用することをお勧めします。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
管理者