WordPressの記事内でソースコードを表示させる方法とツール6選

IncludeWP

WordPressの記事に、ソースコードを貼ろうとしても、綺麗に表示されず、分かりづらい場合があります。情報を分かりやすく伝えるには、ソースコード対応のWordPressのプラグインやサービスを使うのが便利。

ソースコードを表示させる方法とWordPressにおけるソースコード表示のWebサービスをいくつかピックアップします。

ソースコードをWordPressに表示させる方法

WordPressの場合、コードを投稿欄にペーストしても、そのままインターフェイスに反映されません。この記事では、表示させるためのプラグインとWebツールをご紹介しますが、それらのツールには共通して、シンタックス・ハイライトという技術が使用されています。

シンタックス・ハイライトとは

シンタックス・ハイライトとは、テキストエディタの機能を持ち、テキスト中の一部分をその分類ごとに異なる色やフォントで表示するJavascriptライブラリのこと。

ソースコードを表示させるためのWordPressプラグイン2選

1. Crayon Syntax Highlighter

Crayon Syntax Highlighter

Crayon Syntax Highlighterとは、PHPとjQueryで構成されている、シンタックス・ハイライターのこと。テーマのエディターやタグエディター、混合言語対応など、複数の機能が含まれています。一方、プラグインの最新更新は2年前となるため、サイトに導入する前に検討する必要があります。

Crayon Syntax Highlighter

2. SyntaxHighlighter Evolved

SyntaxHighlighter Evolved

SyntaxHighlighter Evolvedとは、シンタックス用のコードのフォーマットやコーディングを変更せずにサイトにコピーができるシンタックス・ハイライターのこと。Crayon Syntax Highlighterと異なり、2017年12月時点では、2ヶ月前に更新されたため、今後の更新も安心してブログに導入できます。

SyntaxHighlighter Evolved

WordPressソースコード埋め込みサービス

ソースコードを表示する方法に加え、コード埋め込み用タグ生成ができるツールをご紹介します。

1. IncludeWP

IncludeWP

IncludeWPとは、WordPressテーマの開発者が無料でリリースするフレームワークのまとめサイトのこと。今後のテーマ開発において、フレームワークを参照にし、より早く開発できます。

IncludeWP

2. WP Hasty

WP Hasty

WP Hastyとは、WordPressにおける各項目のコードを生成できるツールのこと。ショートコードや、カスタムの投稿や、WP_Queryなどのコードを生成できます。コードを生成できる画面まで飛ばすと、ボタンをタップするだけでコードをコピーできます。

WP Hasty

3. GenerateWP

GenerateWP

GenerateWPとは、コードジェネレーターで、管理者の機能や、カスタムクエリなど、WP Hastyより幅広くコードを生成できるサービスのこと。 wp-config.phpの編集も可能です。WP Hastyと異なり、有料のコード作成があるにも関わらず、アカウント作成なしでも25個ほど生成できる無料の項目もあります。

GenerateWP

4. Admin Account Generator

Admin Account Generator

Admin Account Generatorとは、WordPressのサイトのメインの管理者アカウントを新規アカウントに切り替えるためのSQLのコードジェネレーターのこと。

新しい管理者のユーザー名と、ディスプレイ名と、パスワードと、データベース名の4項目を記入すると、SQLコードが作成されます。そのコードをコピーし、データベースに記入すると、新規アカウントがメインの管理者になります。

Admin Account Generator

5. You Might Not Need That WP Plugin

You Might Not Need That WP Plugin

You Might Not Need That WP Pluginとは、プラグインなしでも実現できる機能のコードが入っているまとめサイトのこと。カスタム投稿タイプや、関連投稿など、コードをWordPressのfunctions.phpに記入する際、プラグインを使用せずに実行できます。望んでいる機能から検索してから、コードが表示されます。

You Might Not Need That WP Plugin

6. VersionPress

VersionPress

コードを過去の状態に戻したい場合、VersionPressは有効なサービスです。VersionPressとは、無料でサイトを バックアップができたり、過去のを復元したり、過去の状態に戻せるプラグインのこと。テスト用の環境も作成可能です。

VersionPress

(翻訳:Jordan Colston)

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
エンジニア副業案件
Workship