WordPressサイトでのソースコードの掲載は重要な技術です。特に、読者向けにソースコードを紹介するブロガーやコンテンツクリエイターの方にとっては欠かせない知識でしょう。コードのタグは、通常、ウェブサイトのフロントエンドにレンダリングされた上で表示されるものです。
ボタンを生成したり、段落にスタイルを追加したりといった本来の目的とは別に「コードとしてそのまま表示」するには、特別な方法が必要です。
簡単に言えば、記事にソースコードを掲載する際には、それがコードとして思いがけなく機能「しない」ように注意しなければなりません。コードをそのまま、そして、きれいなデザインで表示することで、その内容を見た人が簡単にコピーしたり、再利用したりできるようになります。
今回の記事では、WordPressサイトで（WordPressのテーマに関係なく）コードをそのまま表示する方法をいくつかご紹介します。その中から、お好きな方法をご活用ください。
WordPressで普通にコードを貼り付けるとどうなるのか
WordPressのビジュアルエディターにコードを書いたらどうなるでしょうか。問題なく動作するはずでしょうか？
実は、そう簡単にはいきません。
起こりうる問題が以下の通りです。
- 投稿のフロントエンドで一部が表示され、他は消えてしまう。訪問者によるイメージを害し、コードのバグのような印象を与える。
- バックエンドでコードが完全に消えてしまい、フロントエンドには何も表示されない。
- 奇妙な書式が表示される。多くの場合、ユーザーフレンドリーではなく、閲覧者にとって公開できるようなレベルではない。
- コードが部分的にレンダリングされる。
これを理解するために、次のHTMLコードを使用します。
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>このコードは、HTMLスタイル要素を使用して、見出しと段落のある3つの緑のコンテンツブロックを生成するものです。
しかし、ここでは、ブログ記事でソースコードそのものを表示したいのであって、実際にブロックにレンダリングしたいわけではありません。
WordPressのGutenbergブロックエディターに直接コードを貼り付けた結果は以下の通りです。
このように、コードがコンテンツ生成という本来の目的で使われていることがわかります。スタイリングが取り除かれて表示されています。
このような状況を避けるために、以下のような方法でコードを表示することをお勧めします。複数ご紹介します。
WordPressサイトでコードをそのまま表示する方法（6つのやり方）
ちなみに後半では、Markdownでコードやコンテンツを書くのが好きな人のために、特別な方法も扱っています。
方法1. Gutenbergブロックエディター（デフォルト）を使う
WordPressでコードを表示する練習として、こんな例をご用意しました。HTMLとstyleタグを用いたCSSで、青い見出しと黒い段落を表示してみます。
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: beige;}
h1 {color: blue;}
p {color: black;}
</style>
</head>
<body>
<h1>Fun Facts About Otters</h1>
<p>A group of otters in water is called a "raft," since they all link arms to prevent from floating away.</p>
</body>
</html>実行すると、コードはフロントエンドでこのように表示されます。
しかし、コードのレンダリングの結果をフロントエンドに表示するのではなく、コードそのものを表示したいので、もう少し工夫が必要になります。
ステップ1. WordPressでコードブロックを追加する
WordPressのGutenbergエディターには、すでにコードブロックが組み込まれており、このブロックによって、コードのフォーマットを失うことなく、また実際にコードを有効にすることなく、そのまま表示することができます。
始めに、WordPressで投稿または固定ページを開き、「＋」と表示されている（ブロックを追加）アイコンをクリックします。
すると、複数のブロックが表示されます。コードブロックを移動して探すか、検索バーに「コード」などのキーワードを入力して検索することができます。
「コード」ブロック（括弧のアイコン）が表示されたら、それをクリックします。
すると、フィールドに「コードを入力…」と表示されます。
WordPress Gutenbergエディターはマークダウンに対応しているので、エディタにフォワードスラッシュ(/)を入力し、「コード」と書いて、コードブロックを見つけることもできます。WordPressではこのようにブロックを素早く挿入可能です。
コードブロックとカスタムHTMLブロックは混同されがちです。しかし、カスタムHTMLブロックは、フロントエンドでレンダリングするHTMLを追加するためのものであり、コードをそのまま表示するためのものではありません。
ステップ2. コードブロックのフィールドに表示したいコードを貼り付ける
次に、表示したいコードをコピーして、「コードを入力…」とあるボックスに貼り付けます。
すると、ボックスの中にコードが表示されます。
コードブロックの優れた点として、コードスニペット内にすでにあったスペースやタブをすべて保持してくれます。そのため、コピー元のソースと同じ見た目になります。
ステップ3. 公開と結果の表示
WordPressの投稿や固定ページでコードを表示するには「公開」ボタンをクリックする必要があります。これで作業完了です。
もちろん、「プレビュー」を選択し公開前に見た目を確認することもできます。
「公開」ボタンを押したら、その投稿にアクセスして、コードそのものとして表示されていることを確認しましょう。
このように、コードブロックは非常にシンプルです。書式を維持しながら、ブログ記事などでコードを簡単に公開することができます。
下のスクリーンショットをご覧ください。この例では、元のコードがそのまま、フロントエンドで灰色のボックスとして表示されています。
ステップ4. コードブロックの書式を考える
コードブロックを目立たせるために、デフォルトの外観から変更することもできます。
ブロックのスタイリングを調整するには、「コード」ブロックを選択し、「設定」（歯車のアイコン）ボタンを選択します。すると「ブロック」タブが開き、選択したブロック（この場合は「コード」ブロック）の設定が変更できるようになります。
コードブロックのテキストや背景色などを変更し、自由にスタイルを設定できます。
また、以下のようなこともできます。
- テキストの大きさを変更する
- ボックスにパディングとマージンを追加する
- 幅と色を指定して枠線をつける
ブロックの編集が終わったら、いつものように「公開」ボタンをクリックし、WordPressの投稿のフロントエンドで結果を確認します。
方法2. プラグインを使用する
WordPressでコードを表示するもう一つの方法は、プラグインのインストールです。
WordPressにはすでにコードブロックが組み込まれていることを考えると、この方法は少し冗長に思えるかもしれません。しかし、プラグインによっては、機能の利便性により利用を検討するに値するでしょう。簡単に言えば、標準のGutenbergコードブロックよりもきれいなブロックを作ることができます。
また、クラシックエディターでコードを表示するのは少し手間なので、クラシックエディターであれば、プラグインを使った方が簡単かもしれません。
まずは「シンタックスハイライト」プラグインの選択からです。これを利用することで、ソースコードをハイライトでき、書式を維持する手助けになります。
WordPressでコードを表示するのに便利なプラグインをいくつかご紹介します。
ここでは、Enlighterを使用します。このプラグインは、コードボックスに表示するコードにタグ付けする機能など、多くのスタイリングに関する機能を搭載しています。とは言え、他のプラグインもほとんど同じようなことができるので、ぜひ試してみてください。
ステップ1. シンタックスハイライトプラグインをインストールする
「Enlighter – Customizable Syntax Highlighter」を、お好みのプラグインインストール方法でWordPressサイトにインストールしてください。
プラグインを有効化すると、「挿入」ボタンにより、Gutenbergブロックやクラシックエディターを用いた投稿/固定ページで利用できるようになります。
ステップ2. Enlighterソースコードブロックを投稿に挿入する。
WordPress Gutenbergブロックエディターを使用している場合には、コードを表示したい投稿を開きます。「＋」アイコン（ブロックを追加）をクリックして、ブロック一覧を表示します。
「Enlighter sourcecode」ブロックを移動して探すか、文字を入力して検索します。そのブロックをクリックすると、投稿に挿入されます。
ステップ3. シンタックスハイライトブロックにコードを貼り付ける
「Enlighter sourcecode」ブロックには、「Generic Highlighting」のタイトルと「Insert Sourcecode..」のフィールドが表示されます。
WordPressで表示したいコードを「Insert Sourcecode..」フィールドに入力します。
シンタックスハイライトの機能として、すべての書式が保持されます。見た目を確認したら、「公開」ボタンをクリックします。
ステップ4. フロントエンドでコードをプレビューする
投稿のフロントエンドを表示して、サイト訪問者への表示についても確認しましょう。
Enlighterプラグインのコード表示はミニマリストスタイルです。整理や参照に便利な番号が各行に付されています。
WordPressでのコード表示にプラグインを使用することには、いくつものメリットがあります。例えば、Enlighterにより用意したコードをフロントエンドで確認すると、行がハイライトされていることがわかります。
また、コードボックスの右上には、複数のボタンがあります。コードを行番号なしのプレーンテキストで表示したりすることができます。
2つ目のボタンは「Copy To Clipboard」で、コードボックス内の内容をクリップボードにコピーし、好みのプログラムに貼り付けることができます。
最後に、3つ目のボタンは、コードを新しいウィンドウで開くものです。ブラウザウィンドウのプレーンテキストとして表示します。
ステップ5. コードボックスの言語と行の設定
Enlighterには、様々なテーマ、機能が付属しており、コードボックスを好きなように表示できます。デフォルト以外のテーマを使うには、WordPressの投稿に戻り、「Enlighter Sourcecode」ブロックをクリックしてください。
すると、WordPressの「ブロックサイドバー」が表示されます。もし表示されない場合は、WordPressウィンドウの右上にある「設定」（歯車アイコン）をクリックしてください。
まず注目したいのが「Language」設定です。この設定により、プログラミング言語に応じた適切なフォーマットやハイライトが判断できるようになります。
このフィールドは、プログラミング言語を指定するものです。
「Speciallines」フィールドを使って、特定の行をハイライトすることができます。カンマで区切り番号を入力すると、その行の色が変わります。
その結果、サイト訪問者に対して、指定したすべての行が強調表示されます。
「Lineoffset」フィールドは、コードを特定の番号の行から開始するのに使えます。大きなコードの中でも一部に焦点を当てるのに有効です。
このように、例えば「Lineoffset」フィールドに10を入力すると、コードが10から始まります。
ステップ6. テーマの選択
このプラグインでは、Enlighterテーマがデフォルトのテーマとなっています。しかし、「Theme」フィールド（ブロック設定パネルの下にあります）から、さまざまなテーマを選ぶことができます。
例えば、「Godzilla」テーマは、方眼紙にコードを表示するようなイメージです。
また、「Atomic」テーマでは、背景がダークテーマに切り替わり、テキストは白、コードタグはピンクになります。
また、「Enlighter」テーマのミニマリスト版として、明るい色と明確な線を用いた「Classic」テーマもあります。
ステップ7. テーマの作成を検討する
WordPress管理画面内のEnlighterプラグインの設定項目から、あらゆる機能を調整可能です。
コードボックスのデザインを変更するには、「Enlighter」（<>アイコン）を開き、「Appearance」または「Theme Customizer」を選択します。
「Appearance」タブでは、標準的なテーマを選ぶことができ、また、以下のような要素を調整することが可能です。
- コードのインデント
- テキストの改行
- 行番号の表示
- ラインホバー効果
- ダブルクリックでのRAWコード表示
「Theme Customizer」には、テーマをゼロから構築できるタブがたくさん用意されています。ボタン、表現、言語などを調整できます。
おまけ─クラシックエディターでEnlighterを使う
Enlighterプラグインは、WordPressのクラシックエディターでは、少し違った働きをします。
Enlighterプラグインをインストールしたら、任意の投稿や固定ページに移動し、エディターの「Enlighter Code Insert」ボタンをクリックします。
すると、「Enlighter Code Insert」という新しいウィンドウが開きます。
下部にある大きな（ラベルのない）フィールドに、表示したいコードを貼り付けます。
「Language」フィールドからドロップダウンメニューをクリックし、好みの言語を選択します。
完了したら、「OK」ボタンをクリックします。このウィンドウでは、行のインデントを追加するなど、他の機能の調整も可能です。
投稿の「公開」ボタンをクリックし、フロントエンドで結果を確認します。Classicエディターのデフォルトのコードボックスはダークテーマですが、コードボックスの外観を変更したり、独自のテーマを構築することも可能です。
方法3. エンコーダを使用する
エンコーダは、WordPressでコードを表示することが頻繁ではない場合（プラグインをいじりたくない場合）には、代替案としておすすめです。
HTMLエンコーダは、特に特殊文字やタブを含むコードフォーマットの整合性を維持するものです。あらゆる種類のコードを扱うことができ、WordPressに簡単に貼り付けられるHTMLコードに変換してくれます。
プラグインとしておすすめできるエンコーダは正直ありませんが、無料のサードパーティ製ウェブアプリはたくさんあります。エンコーダはスタイルを気にすることなく、対象のコードをシンプルに表示できます。つまり、派手なボックスや行のカスタマイズ機能はありません。
おすすめのエンコーダーツールには、以下のようなものがあります。
実際に試してみたところ、最も使い勝手がいいのはW3Docs HTMLエンコーダでした。以下の説明ではこれを使用していきます。
ステップ1. エンコーダを開き設定を選択する
W3Docs HTML Encoderのウェブサイトにアクセスします。
ページには、2つの横並びのボックスフィールドが表示されています。左側のフィールドは、コードを貼り付ける場所です。右側には、WordPressにコピー＆ペーストできるバージョンが出力されます。
ただし、最初にどのタイプのコードを保存するかを設定する必要があります。
- JavaScriptの要素を含むコードを貼り付ける場合は「JavaScript unicode」を選びます。
- HTMLを使用する場合は「HTML symbols」を使用します。
ステップ2. 貼り付けとクリックでエンコードする
WordPressで表示したいコードを左のフィールドに貼り付けます。そして、右上の「Encode」ボタンをクリックします。
ステップ3. デコードした結果をコピーする
完成したものは一見わかりにくいですが、実はHTML要素の組み合わせです。挿入したコードのあらゆる側面を保持し、コードが有効になりフロントエンドに別のものが表示させる可能性を回避してくれます。
「Copy」ボタンをクリックします。
ステップ4. エンコードしたHTMLをWordPressのエディターに貼り付ける
WordPressに戻り、目的の投稿または固定ページを開きます。
右上にある「オプション」（縦に3つ並んだドット）メニュー項目を選択します。そして「コードエディター」をクリックします。
ビジュアルブロックエディターの代わりに「コードエディター」が表示されます。コードを表示したい箇所を探し、エンコードしたHTMLをエディターに貼り付けます。
クラシックWordPressエディターを使用している場合、Gutenbergブロックエディターのコードエディターと同じ「テキスト」タブに移動します。
ステップ5. 公開してコードを表示する
投稿の「更新」または「公開」（またはプレビュー）をクリックし、その投稿のフロントエンドに移動して、どのように見えるかを確認してみましょう。
エンコーダに貼り付けた、HTMLエンコーディング要素を追加する前の元のコードが表示されるはずです。前述のように、エンコーダにはスタイリング機能がないため、クリーンでミニマルな外観を実現するには有用です。
方法4. ショートコードを使用する
ショートコードを作成すれば、コピー＆ペーストすることなく、再利用可能なコードを挿入することができます。カスタムショートコードは、WordPressでコードを表示するのに便利です。
ショートコードを使用してコードを表示することのメリットは以下の通りです。
- ショートコードを使えば、複雑なコードを一度保存してから再利用できるので、毎回長いコードを入力する必要がなくなる。
- コードのハイライトやボックスのスタイリングをCSSで自由に設定できる。
- ショートコードは誰でも使えるので、他の投稿者もボタンをクリックするだけで簡単にコードのハイライトやブロックを利用できる。
ショートコードの作成には、WordPressテーマファイルの編集、PHPコードの操作、およびWordPressプラグインの作成の経験が必要です。これらの要件により、WordPressのショートコード作成は、PHP初心者には少し難しいかもしれません。
しかし、結果として、WordPress上でのコードの表示が格段に簡単になります。
カスタムショートコードには好きな名前を付けることができ、[html] [/html] や[css] [/css] のように、プログラミング言語用に複数のオプションを作成することも可能です。
カスタムショートコードは、テキストエディター（WordPressクラシックエディター）を使用する場合はシンタックスハイライトと、WordPress Gutenbergブロックエディターで作業する場合はカスタムHTMLボックスと相性がいいので、その点だけ念頭に置いておいてください。
目標は、開閉タグの間にソースコードを入力または貼り付けることができるショートコードを構築することです。
公開すると、ショートコードのスタイルとハイライトの設定がフロントエンドに表示されるようになります。また、追加したコードは、シンタックスハイライト付きできれいに表示されます。
方法5. <code><pre>タグを使用
WordPressでコードを表示する最も古い方法かもしれませんが、今でも堅実な選択肢です。WordPressクラシックエディターを含め、あらゆるHTMLエディターで作業する際に便利な方法です。
この方法には2つのオプションがあります。
<code>タグ：短いコードを表示するのに適しています。よく段落の中で使用されます。<pre>タグ：長いコードや、多くの書式の調整を必要とする場合に便利です。
オプション1. インラインコードには<code>タグを使用
コーディングについてのコンテンツ制作をしていると、常に大きなコードブロックを使うわけではありません。時には、段落の中にちょっとしたコードを入れる方が合理的な場合もあります。
しかし、その場合でも、コードの書式をきれいに整えて保持する必要があります。また、コードによっては、適切に保存しないと、周囲のコンテンツに問題が生じることがあります。
例えば、<br>タグを例に挙げてみましょう。<code>タグがないと、段落に改行を追加してしまいます。
このように、タグの中にコードを配置することで、問題が発生せず、きれいな仕上がりになります。
<code> </code>WordPressの記事を開き、コードエディター（Gutenbergブロックエディター）またはテキストエディター（WordPressクラシックエディター）のどちらかを選択します。
表示させたいコードはまだ挿入しないで、このタグをエディターの貼り付けたい箇所に入力します。タグとタグの間にスペースを入れておきます。
<code> </code>
そしてビジュアルエディターに切り替えます（Gutenbergとクラシックエディターのどちらであっても）。
ビジュアルコンテンツの中に小さなグレーのスペースが表示されます。クリックして、そのグレーのスペース内にカーソルを置いてください。そして、ここに表示したいコードを貼り付けます。
入力すると、コードに合わせてグレーのスペースが広がります。全て完了したら、投稿の「公開」または「更新」ボタンをクリックします。
投稿のフロントエンドを確認します。すると、コードがそのまま保存されていることがわかります。
この<code> タグの書式は通常、素っ気ないものですが、テーマのスタイリングに依存することがあります。例えば、この例ではフォントが変更されるだけで、グレーの背景はありません。
オプション2. 長いコードブロックには<pre>タグを使用
長めのコードには、段落ごとに区切られた専用のブロックが必要です。そんな時には、<pre>タグの使用をお勧めします。
<pre>タグを追加する手順は、<code>タグと同じですが、コードを挿入する際に使えるスペースが広くなります。
投稿に移動して、コード（Gutenberg）またはテキスト（クラシック）エディターを開きます。表示させたいコードを貼り付けるか入力します。次に、コードを以下のタグで囲みます。
<pre> </pre>
ビジュアルエディタに切り替えて、どのように見えるか確認します。テキストのセクションに「整形済みテキスト」というラベルが付いています。これは<pre>タグが機能している証拠です。
「公開」または「更新」をクリックし、フロントエンドに切り替えると、コードが元の形で表示されていることがわかります。<code>タグと同様に、<pre>タグは書式設定ができないので、きわめてシンプルな外観になります。とは言え、これを自分好みに調整する方法はあります。
<pre>タグをスタイリングするヒント
<pre>タグは、<code>タグに比べて安定性に欠けるため、表示しようとするコードの種類によっては難しい場合があります。
見え方を改善するコツをいくつかご紹介します。
<pre>タグは改行を認識しないことが多いので、改行を削除するか、完全に回避するように努めてください。一般に、改行が多すぎると反応が悪くなります。- CSSに
overflow-x:auto;プロパティを追加して、<pre>タグのコードにスクロール機能を追加することも検討してください。<pre>タグの設定上、コードがページ外に飛び出してしまうことがあるため、コンテンツの大きさ次第で有効です。 - 等幅フォントを採用するようしましょう。
また、テキストフォーマットやボックスもスタイリッシュにすることができます。以下に例をご紹介します。CSSファイルに追加してご自由にお使いください。
article pre{
background:#ffffff;
border:3px #eee solid;
border-top:30px #eee solid;
font-family:Consolas, courier;
font-size:0.8em;
white-space:pre;
overflow-x:auto;
}方法6. WordPressと相性の良いMarkdownエディタを使用する
Markdownエディタは、入力と書式設定を高速化できるだけでなく、その多くがWordPressに直接接続するかたちで、エディタからすぐに公開できるようになっています。
多くのライターの間でMarkdownエディタが利用されている理由は、このようなコンテンツ作成プロセスの高速化にあります。そして、エディタの中には、コードブロック用のマークダウンが用意されているものもあります。
通常のテキストエディタ（Sublime Textなど）では、WordPressで公開するためにコードを転送しても、その整合性が保たれないことに注意が必要です。また、HTMLエディタは、コードの記述や保存には優れていますが、WordPressでの公開に必要なハイライト機能はありません。
Markdownエディタはたくさんありますが、理想的なソリューションは2つの特徴を備えています。
- WordPressに直接エクスポートできる
- コードハイライトに対応している
ただし、WordPressへの直接エクスポートがお好みでなければ、HTMLエクスポートが可能なMarkdownエディタを選ぶこともできます。
両方の機能を持つおすすめのマークダウンエディタは以下の通りです。
UlyssesとByWordは有料、Obsidianは無料版と有料版の両方があります。
以下の説明では、Ulyssesを使用することにします。
ステップ1. Ulyssesで長文コードブロックを追加する
Ulyssesで文書を作成中、文書内にコードハイライターブロックをすぐに追加したいときは、"（アポストロフィ2つ）と入力します。
これは、長いコードのためのものです。段落の途中では使えず、有効にするためには新しい行を作る必要があります。
コード用のスペースが表示されたら、そこに好きなものを入力したり、貼り付けたりすることができます。
コードブロックをオンにするもう一つの方法として、「Markdown」（3つの水平な点）メニュー項目をクリックし、「コード」オプションを選択することができます。
このメニュー項目をクリックすると、カーソルのある場所にコードブロックが表示されます。
文章中にコードを配置するには、``（ほとんど同じに見えますが、実際にはアポストロフィではなく2つのグレイヴ・アクセント）を使用します。
ステップ3. WordPressに書き出す
文書の準備ができたら、いよいよWordPressにエクスポートします。
WordPressと連携するMarkdownエディタの素晴らしいところは、転送中もコードブロックが維持されることです。WordPressで公開できる状態の、フォーマットが整ったコードブロックが表示されます。
Ulyssesの上部にあるツールバーから、「投稿プレビュー」ボタンをクリックします。
これにより、エクスポート先のプラットフォームとウェブサイトを選択するドロップダウンメニューが表示されます。また、そのメニューにある「アカウントを管理」を使用して、WordPressサイトにログインできます。
ウェブサイトを選択したら、「公開」ボタンをクリックします。
投稿タイトル、スケジュール、そしてカテゴリー、タグ、アイキャッチ画像など、必要な情報を指定します。
ただし、最も重要なのは、WordPressで確認せずに投稿を公開しないように、「ステータス」を「下書き」に設定することです。
「OK」をクリックして次に進みます。
数秒後、Ulyssesから文書全体がWordPressに反映されます（ポップアップが表示されたら、WordPress管理画面にログインする必要があります）。
確認してみると、コードブロックが設定され、公開の準備が整っていることがわかります。全ての確認を終えたら「公開」ボタンをクリックし、公開へと進むことができます。
フロントエンドでは、インラインコードスニペットと大きなコードブロックがきれいにハイライトされ、そのコードからのフォーマットが保持されていることがわかります。
まとめ
WordPressでソースコードをそのまま表示する方法はいくつかありますが、どれを選ぶかは、使用しているWordPressエディター、プログラミング言語、そのコードをどのように表示・装飾したいかによります。例えば、プラグインを使うことで、WordPress Gutenbergエディターの標準的なコードブロックよりも、きれいな見た目に調整することができます。
この記事では、WordPressサイトでソースコードを（レンダリングさせることなく）表示する方法を複数ご紹介しました。
一般的には、方法1から始めてみることをお勧めします。方法2は、見た目をできるだけ整えたい人向けで、方法3～5は、特定の状況でのみ有用です。方法6は、WordPressに直接書き込むよりもMarkdownエディタの利用を好む人向けの、ややおまけのような選択肢です。
どの方法を選ぶにせよ、一流のサイト作りには信頼できるサーバーサービスが欠かせません。KinstaのWordPress専用サーバーは、あらゆる種類やサイズのサイトに対応したプランをご用意しています。使いやすいコントロールパネル「MyKinsta」から、サイトとそのファイルのあらゆる部分を簡単に編集することができます。さらに、Kinstaの世界トップクラスのスピード、セキュリティ、サポートという強みも付帯します。
過去にWordPressでソースコードを表示しようと挑戦したことはありますか？もしそうでしたら、どんな方法が一番効果的でしたでしょうか？以下のコメント欄からお聞かせください。
