ワードプレス は、インターネット上のすべての Web サイトの半分以上を動かしている堅牢なコンテンツ管理システムです。組み込みの CRM により、これまでコンピューター プログラムを作成したことがない場合でも、簡単に Web サイトを作成できます。 WordPress Web サイトで通常のテキスト ブロックを表示するのは非常に簡単ですが、コンピューター コードについては同じことが言えません。視聴者がコードを分析して理解できるように、コードを適切に表示する必要があります。そこで、WordPress コードブロックの出番です。
WordPress でコード ブロックを使用する方法を知りたい場合は、適切な場所に来ました。この記事では、コード スニペットを読者と共有できるように、プロセス全体を説明します。詳細については、読み続けてください。
WordPressでコードブロックを使用する方法
コンピュータ プログラムを通常の Web ページのテキストとして表示すると、悲惨な結果になる可能性があります。多くのユーザーは、視覚化して理解するのが難しいと感じるでしょう。幸いなことに、多くの WordPress エディターには、コンピューター プログラムをコード形式で表示できるコード ブロック機能があります。
幸いなことに、コード ブロックを使用してコンピューター コードを表示するのは比較的簡単です。一部のテキストプラグインには機能がない可能性があるため、開始するには、ネイティブの WordPress エディターに切り替える必要があります。それが完了したら、次の手順に従って、Web サイト ページにコード ブロックを追加します。
- [新規] ボタンをクリックして、コード ブロックを追加する Web ページを開きます。
- 「/code」と入力して「Enter」を押します。
- 表示したいコードを入力または貼り付けて、「Enter」キーを押します。
- さらに、コード ブロック ツールバーを使用して、記述したコードの外観をカスタマイズできます。たとえば、「B」ボタンを使用して行を太字にしたり、「i」ボタンを使用して斜体にしたりできます。
- ウェブページの作成が完了したら、[プレビュー] ボタンをクリックして、ライブ バージョンでコード ブロックがどのように表示されるかを確認します。
- 最終結果に満足したら、[更新] ボタンをクリックして、他のユーザーもコード ブロックを確認できるようにします。
コード ブロックのタイポグラフィを変更する方法
タイポグラフィは多くを語り、コード ブロックだけでなく Web ページ全体の美学を左右する可能性があります。コード ブロックのタイポグラフィを変更するには、次の手順に従います。
- タイポグラフィを変更するコード ブロックを強調表示します。
- 画面の右上隅にある「設定」アイコンをクリックします。
- 「タイポグラフィ」セクションで、好みのタイポグラフィを指定します。
- 「更新」ボタンをクリックして、変更を保存します。
色、背景、文字間隔、行間隔を変更することで、ブロックの美学をさらにカスタマイズできます。
たとえば、暗いテーマの Web サイトがある場合は、コード ブロックの背景を別のものにすることもできます。
WordPressでコードブロックを削除する方法
コード ブロックは永久的なものではなく、WordPress Web ページの他の要素と同様に削除できます。プロセスの進め方は次のとおりです。
クロームキャストにインターネットが必要ですか
- 削除するコード ブロックを含む Web ページまたは投稿を開きます。
- 削除するコード ブロックをクリックして強調表示します。
- コード ブロックの上部にポップアップするウィジェットで、3 つのドットをクリックします。
- オプションから、「コードを削除」を選択します。
上記のアクションにより、Web ページからコード ブロック全体が削除されます。または、単にブロックを選択して「削除」キーを押すこともできます。 「Ctrl」+「Shift」+「Z」キーを同時に押すこともでき、同じ結果が得られます。
公開済みのコード ブロックを編集する方法
ときどき、間違いを犯すことになります。また、コードを通じてアイデアを実行するためのより良い方法に出くわすかもしれません。 WordPress では、以下の手順に従って既存のコード ブロックを編集できます。
- 編集するコード ブロックがあるページを開きます。
- 「編集」をクリックします。
- コード ブロックをクリックして、コード編集を有効にします。
- 変更が完了したら、「更新」ボタンをクリックします。
プラグインを使用して WordPress ウェブサイトにコード ブロックを追加する方法
Web サイトにコード スニペットを頻繁に追加する場合は、より強力なプラグインを使用することをお勧めします。人気のある強力で優れたコード ブロックの 1 つは、 進化したシンタックスハイライター プラグイン。
このプラグインは、次の理由により、ネイティブの WordPress エディターよりも優れています。
- コードスニペットの行数を強調表示します
- 複数のプログラミング言語をサポートしています
- 閲覧者は表示されたコードをコピーして貼り付けることができます
プラグインを使用して Web サイトのコード スニペットをより適切に管理する方法は次のとおりです。
- をインストールしてアクティブ化します。 進化したシンタックスハイライター プラグイン。
- コード ブロックを追加する場合は、ページまたは投稿を開きます。
- 編集を有効にして、プラス ボタンをクリックします。
- 「SyntaxHighLighter Evolved」を検索し、最初に表示される結果を開きます。
- 使用可能なコード ブロックにコードを貼り付けるか、記述します。
- 画面の右上隅にある設定アイコンをクリックし、[ブロック] タブに移動します。
- 番号付けの表示方法と強調表示するコード行を指定します。
- コードをクリック可能にしたい場合は、「URL をクリック可能にする」をオンにすることもできます。
コード ブロックの色と書式設定を変更するには、次の手順に従います。
- 「設定」に移動し、「SyntaxHighlighter」セクションに移動します。
- ブロックのテーマを変更します。
- [プレビュー] の [保存] をクリックして、変更がライブ モードでどのように表示されるかをプレビューします。
その他のよくある質問
コード ブロックをクリック可能なリンクにするにはどうすればよいですか?
WordPress エディターを使用してコード ブロックをリンクにするには、次の手順に従います。
1. リンクとして機能させたいコード行を選択します。
2. ポップアップ ウィジェットから、リンク アイコンを選択します。または、キーボードの「Ctrl」+「K」キーを押すこともできます。
3. コードをリンクしたい URL を入力し、「Enter」キーを押します。
WordPress エディターが提供するコード ブロック エディターを使用してコードを強調表示できますか?
いいえ、ネイティブの WordPress エディターが提供するコード ブロックでは、ユーザーはコードをコピーして貼り付けることができません。そのためには、「SyntaxHighligher Evolved」プラグインのような高度なコード ブロック編集プラグインの助けが必要です。
Elementor にはコードブロック機能がありますか?
Elementor は、WordPress Web サイトの構築に使用される人気のあるドラッグ アンド ドロップ プラグインです。残念ながら、プラグインを使用して Web サイトを作成している場合、Web サイトでコンピューター プログラムをフォーマットできるブロックは見つかりません。したがって、タスクを完了するには、従来の WordPress エディターに切り替える必要があります。
ウェブサイトを立ち上げて実行する
プログラミング ブログを運営している場合でも、ウェブサイトでコード スニペットを共有したい場合でも、WordPress でコード ブロックを使用する方法を知ることは非常に重要です。コード ブロックは、読者に簡単な時間を与え、全体的に Web サイトのユーザー エクスペリエンスを向上させます。ご覧のとおり、コード ブロックの挿入は、特にネイティブの WordPress エディターを使用すると、比較的簡単なプロセスです。
この電話番号は誰のものですか
WordPress が提供するコード ブロックを使用してみましたか? SyntaxHighlighter Evolved プラグインはどうですか?以下のコメントセクションであなたの経験を私たちと共有してください.
