私たちが読者の問題解決を支援するために作成するさまざまなWPBeginnerのブログ記事で、コードスニペットを見たことがあるはずです。しかし、そのコードを表示するのは簡単ではありません。
これは、コードを通常のテキストのように追加しようとすると、WordPressが正しく表示しないためです。WordPressは、投稿を保存するたびにコンテンツをいくつかのクリーンアップフィルターに通します。これらのフィルターは、誰かが投稿エディターを介してコードを挿入してウェブサイトをハッキングできないようにするために存在します。
この記事では、WordPressサイトでコードを簡単に表示するための適切な方法を紹介します。さまざまな方法を紹介するので、ニーズに最も合ったものを選ぶことができます。
WordPressウェブサイトにコードを表示する理由
技術的なトピックに関するブログ記事を書いている場合や、製品のドキュメントを作成している場合は、コードスニペットを表示すると非常に役立ちます。ユーザーはコード片を簡単にコピーして、自分のウェブサイトに追加できます。
ただし、WordPressウェブサイトにコードを表示するのはそれほど簡単ではありません。
WordPressはスニペットを機能的なコードとして解釈し、テキストとして表示するのではなく、ウェブサイトに実装しようとします。また、コードを正確に表示しないため、ユーザーがウェブサイトに入力した際にエラーが発生します。
さらに、WordPressはセキュリティ対策として複数のフィルターを使用しています。コンテンツエディタに悪意のあるコードが挿入されてウェブサイトがハッキングされるのを防ぐためにコンテンツをフィルター処理します。
とはいえ、WordPressでコードを表示する方法はいくつかあります。以下のリンクをクリックすると、お好みのセクションにジャンプできます。
方法1. WordPressのデフォルトエディタを使用してコードを表示する
この方法は、初心者やコードをあまり表示する必要のないユーザーにおすすめです。
コードを表示したいブログ投稿またはページを編集するだけです。WordPressコンテンツエディター画面で、投稿に新しいコードブロックを追加します。
これで、ブロックのテキストエリアにコードスニペットを入力できます。
コードブロックにコードのプレビューが表示されます。
その後、ブログ投稿を保存してプレビューすると、コードブロックが機能していることを確認できます。
コードの外観に満足したら、ブログ記事を公開してください。
WordPressのテーマによっては、コードブロックがウェブサイト上で異なって表示される場合があります。
方法2. プラグインを使用してWordPressでコードを表示する
この方法では、ブログ記事にコードを表示するためにWordPressプラグインを使用します。この記事で頻繁にコードを表示するユーザーにはこの方法が推奨されます。
デフォルトのコードブロックと比較して、以下の利点があります。
- 任意のプログラミング言語のコードを簡単に表示できます。
- コードがシンタックスハイライトと行番号付きで表示されます。
- ユーザーはコードを簡単に学習してコピーできます。
まず、SyntaxHighlighter Evolved プラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。
有効化したら、コードを表示したいブログ記事を編集できます。記事編集画面で、「SyntaxHighlighter Code」ブロックを記事に追加します。
投稿エディターに新しいコードブロックが表示され、コードを入力できるようになります。
コードを追加した後、右側の列からブロック設定を選択する必要があります。
まず、PHP、CSS、Javaなどのコードの言語を選択する必要があります。その後、行番号をオフにしたり、最初の行番号を指定したり、任意の行をハイライトしたり、リンクを clickable にする機能をオフにしたりできます。
完了したら、投稿を保存し、プレビューボタンをクリックして動作を確認してください。
このプラグインには、多くのカラー スキームとテーマが付属しています。
カラーテーマを変更するには、設定 » SyntaxHighlighter ページにアクセスする必要があります。
設定ページから、カラーテーマを選択したり、SyntaxHighlighterの設定を変更したりできます。
設定を保存すると、ページの下部でコードブロックのプレビューを確認できます。
Classic EditorでSyntaxHighlighterを使用する
まだ古いクラシックWordPressエディターを使用している場合は、SyntaxHighlighterプラグインを使用してWordPressのブログ投稿にコードを追加する方法は次のとおりです。
コードを角括弧で囲み、言語名を追加するだけです。例えば、PHPコードを追加する場合は、次のように追加します。
<?php
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
同様に、HTMLコードを追加したい場合は、次のようにHTMLショートコードで囲みます。
<a href="example.com">A sample link</a>
方法3. WordPressでコードを手動で表示する（プラグインやブロックなし）
この方法は、より多くの作業が必要であり、常に意図したとおりに機能するとは限らないため、上級ユーザー向けです。
これは、古いクラシックエディターを使用しており、プラグインを使用せずにコードを表示したいユーザーに適しています。
まず、コードをオンラインのHTMLエンティティエンコーダーツールに通す必要があります。これにより、コードマークアップがHTMLエンティティに変換され、コードを追加してWordPressのクリーンアップフィルターをバイパスできるようになります。
次に、コードをコピーしてテキストエディタに貼り付け、<pre> タグと <code> タグで囲みます。
コードは次のようになります。
<pre><code>
<p><a href="/home.html">これはサンプルリンクです</a></p>
</pre></code>
これで投稿を保存し、コードがどのように機能するかをプレビューできます。
ブラウザはHTMLエンティティを変換し、ユーザーは正しいコードを表示およびコピーできるようになります。
この記事が、WordPressサイトでコードを簡単に表示する方法を学ぶのに役立ったことを願っています。また、WordPressの投稿やページでPHPを許可する方法に関するガイドや、専門家が選んだWordPress開発ツールのおすすめもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Olaf
PHP開発者として、私は小さなブログを持っており、時々PHPでのプログラミングに関するさまざまなテクニックやワークフローを投稿したり、独自のコードスニペットを共有したりしています。WordPressがネイティブでコード表示を許可しているのは素晴らしいことです。しかし、私は個人的にプラグインを使用しています。なぜなら、時にはCSSでコードを表示する必要があり、他の時にはPHPで、そして非常にまれにJavaScriptで表示する必要があるからです。コードが適切にフォーマットされ、理想的には機能ごとに色分けされていると有益です。また、ユーザーがコードスニペット全体を簡単にクリップボードにコピーできるように、コピー機能も考慮すると役立ちます。そのため、ブロックエディターよりもプラグインを好みます。
デニス・ムトミ
このプラグインはその仕事には素晴らしいと思いますが…
追加してほしい機能の1つは、コピーボタンです。
現在、ユーザーはコードブロック全体を手動でハイライトしてコピーする必要があり、特に長いスニペットの場合は手間がかかります。
ワンクリックでコピーできるオプションがあれば、ユーザーエクスペリエンスが大幅に向上します。
これにより、読者はコードの一部を誤って見逃すことなく、簡単にコードを取得できるようになります。
WPBeginnerサポート
Thank you for sharing that recommendation
管理者
イジー・ヴァネック
ユーザーが手動でクリップボードにコードをコピーする必要がないように、プラグインにコピーコードボタンを付けることは可能ですか？
WPBeginnerサポート
Not at the moment but we will keep an eye out for a method we would recommend
管理者
イジー・ヴァネック
回答ありがとうございます。これは非常に残念です。なぜなら、多くの作業が楽になるからです。手動の方法でコードにまで行番号がコピーされてしまうことがあります。Elementorには、コピーボタンを備えたコード用のウィジェットがあり、それは素晴らしいです。必要に応じて記事の更新をフォローします。
グレイさん
Hello,
WooCommerceのようなサードパーティ製プラグインで追加されたページにコードを記述できますか？
WPBeginnerサポート
はい、それらのページにコードを配置できます。
管理者
Ravish
こんにちは、まず最初に、このブログをありがとうございます。
さまざまな言語（例：Python、C++）の問題に対するコードを追加したいのですが。どのようにすればよいですか？
WPBeginnerサポート
このプラグインは、これらの言語でも引き続き機能するはずです。
管理者
Nimesh
これは素晴らしいです。
これがなければ、コードスニペットの入力に別のプラグインを使用していたでしょう。
私はまだWordPressのクラシックエディターを使用しており、ここで述べられているように投稿にコードスニペットを追加するつもりです。
この素晴らしい共有をありがとうございます！
WPBeginnerサポート
Glad our guide was able to help
管理者
Induwara
ありがとうございます。
この記事はとても参考になります。プラグインをインストールしたら、うまく動作しました。私のテーマには問題があり、ブロックエディターからコードを挿入すると、テーマが背景色付きで表示するため、コードが見えなくなってしまいます。私はWpBegginerの大ファンです！
WPBeginnerサポート
私たちのガイドがお役に立てて嬉しいです。その問題については、テーマに問い合わせて支援を受けることができるはずです。
管理者
Manju
GithubリポジトリのコードをWordPressの投稿に表示する方法を提案してもらえますか？
WPBeginnerサポート
この記事のようにコードを配置し、その出典がGithubであることを下に注記することができます。コードを直接埋め込むためのプラグインオプションもあるかもしれません。
管理者
クナル・マンダリア
「コード」タグに関するヒント、ありがとうございます。見事に機能しました。
WPBeginnerサポート
You’re welcome
管理者
Mahesh
良いですね。ヒントをありがとうございます。
WPBeginnerサポート
Thank you and you’re welcome
管理者
perveen
WordPressではコーディングが必要だと感じていましたが、WordPressではコーディングは不要だと思っていました。
WPBeginnerサポート
必須ではありませんが、ユーザーにコードを表示したいサイトには、これらの方法を使用できます。
管理者
Adamu Malte
@Syed、素晴らしいチュートリアルをありがとうございます。
manasa
素晴らしい情報が載っている素敵なブログです。ありがとうございます、共有を続けてください。
アン
素晴らしい、コードをどのように投稿できるか気になります
1-click Use in WordPress
そして、コードをテキストのように見せます。
このコードを投稿できるのは良いですね
.entry-title { font-family:”Open Sans”, arial, sans-serif; font-size:16px; color:#272727; }1-click Use in WordPress
投稿での表示方法を変更せずに、投稿に表示します。
Rushikesh Thawale
Thank You for this post.
Christian
There’s a typo on the word ‘Syntax’…no wonder I was getting no results when I copied paste the text on Wordpress plugin search!
Synatx Highlighter Evolvedプラグイン
Ahmed
ありがとう Syed…。素晴らしいチュートリアルです。コードのフォントサイズを変更するにはどうすればよいですか？
デイブ・マッキー
最新バージョンのWordPressでは、Syntax Highlighter Evolvedに問題があると思います。私や他の人も、HTMLエンティティが正しく表示されないという問題を抱えています。詳細はサポートフォーラムをご覧ください。
Md Abul Bashar
プラグインなしでコードのみでコードを表示するにはどうすればよいですか？
John D
個人的には、標準のGeSHiコードを使用するWP-GeSHi-Highlightを使用しています。ここで紹介されているプラグインの前身を使用したと思いますが、言語コードを見つけるのに苦労しました。
アジャイ
最近、コードを表示するためにGISTを使用し、そのGistを投稿に埋め込む方が簡単だと気づきました
Mikhail S.
@AJAY、コードサンプルを表示するためにGISTを使用することについて、もっと詳しく教えてください。
ありがとうございます！
Thomas A. Reinert
全く同意します。フォーマットもシンタックスハイライトも優れており、フォーク可能でバージョン管理も可能です。ですから、少なくとも私にとってはWP GISTが最適です。