WordPressでソースコードを表示する方法

2025.07.23

WordPressの固定ページにソースコードを埋め込みたいのですが、行番号を自動的につけたいのと 長いソースコードそのままでは表示が長くなりすぎるので折りたたんで表示したい。 更にこのソースコードをダウンロードできるようにしたい。 よろしくお長居します。

ChatGPT:

WordPressの固定ページで以下のような機能を実現したいということですね：

  1. ソースコードに行番号を自動表示
  2. ソースコードを折りたたみ（開閉式）表示
  3. ソースコードをダウンロード可能にする

これらをプラグインを使わずに実装する場合、HTML＋CSS＋JavaScript で比較的簡単にできます。以下に具体的なコードと手順を紹介します。

          1. ChatGPT:
  1. ✅ 手順：すべて実装したコードの例
    1. ① WordPressブロックエディタで「カスタムHTMLブロック」を使って以下を貼り付け
  2. ✅ 各機能の補足説明
    1. 📌 行番号の自動表示
    2. 📌 折りたたみ表示
    3. 📌 ダウンロードリンク
  3. ✅ 応用ヒント（便利な方法）
    1. 1. プラグインを使いたい場合は以下も検討：
    2. 2. ソースコードが長いときのスクロール対策
  4. ✅ 次にやるべきこと
        1. あなた:
          1. ChatGPT:
  5. ✅ WordPressに貼り付けるコード（HTMLブロック用）
  6. ✅ ダウンロードリンクの設定方法
  7. ✅ おまけ：コードの .ino ファイルが必要ですか？
        1. あなた:
          1. ChatGPT:
  8. ✅ 「カスタムHTMLブロック」の挿入手順（WordPress 6.8.x / Cocoon 子テーマ）
    1. ① 固定ページを編集画面で開く
    2. ② 画面左上の「＋」ブロック追加ボタンをクリック
    3. ③ 表示された検索バーに「html」と入力
    4. ④ 「カスタムHTML」をクリックするとブロックが追加されます
    5. 補足ヒント
  9. ✅ テスト表示するには
        1. あなた:
          1. ChatGPT:
  10. ✅ 状況の確認と解決ステップ
    1. ❓ 「Enlighter」プラグインを有効化したが、アイコン（{}）が表示されない
    2. ✅ 1. クラシックエディターが有効になっていない
      1. ✅ 対応方法：
    3. ✅ 2. クラシックブロックを使う
      1. 方法：
  11. ✅ Enlighter のコード挿入手順（クラシックUI）
  12. ✅ まとめ
        1. あなた:
          1. ChatGPT:
  13. ✅ 次のステップ：「Enlighter」のコードブロックを折りたたみ可能にする
  14. ✅ 方法①：Enlighterのショートコードをアコーディオンブロックで包む（CSS＋HTML）
    1. 🔧 手順
    2. 🔍 ポイント
  15. ✅ 方法②：Enlighterのコードを「クラシックブロック＋アコーディオンブロック」で組み合わせ
  16. ✅ 例（Cocoonの
  17. ✅ まとめ
        1. あなた:
          1. ChatGPT:
  18. ✅ [open] ショートコードの基本構文（Cocoonテーマ）
  19. ✅ 例：あなたのPWMコードをEnlighter＋
  20. ✅ 表示イメージ（クリックすると開閉）
  21. ✅ 補足：使い方のヒント
  22. ✅ 必要条件
  23. ✅ ダウンロードリンクを追加するには？
        1. あなた:
          1. ChatGPT:
  24. ✅ 解決方法：「カスタムHTML」ブロックに貼り付ける
    1. ▼手順：
  25. ✅ 表示例（実現されること）：
  26. 🔍補足：なぜ「ショートコードブロック」だとうまく動かない？
  27. ✅ 解決のキーワード

✅ 手順：すべて実装したコードの例

① WordPressブロックエディタで「カスタムHTMLブロック」を使って以下を貼り付け

htmlコピーする編集する<style>
.code-box {
  border: 1px solid #ccc;
  margin-bottom: 1em;
  border-radius: 5px;
  overflow: hidden;
}

.code-header {
  background-color: #f5f5f5;
  padding: 0.5em;
  cursor: pointer;
  font-weight: bold;
}

.code-content {
  display: none;
  max-height: 400px;
  overflow: auto;
  background: #272822;
  color: #f8f8f2;
  font-family: monospace;
  padding: 1em;
  white-space: pre;
  counter-reset: line;
}

.code-content code {
  display: block;
  line-height: 1.5;
}

.code-content code span {
  display: block;
  counter-increment: line;
}

.code-content code span::before {
  content: counter(line);
  display: inline-block;
  width: 2em;
  margin-right: 1em;
  color: #999;
  text-align: right;
}
</style>

<div class="code-box">
  <div class="code-header" onclick="toggleCode(this)">
    ▼ ソースコードを表示/非表示
  </div>
  <div class="code-content">
    <code>
      <span>void setup() {</span>
      <span>  Serial.begin(9600);</span>
      <span>}</span>
      <span></span>
      <span>void loop() {</span>
      <span>  Serial.println("Hello, world!");</span>
      <span>  delay(1000);</span>
      <span>}</span>
    </code>
  </div>
</div>

<!-- ダウンロードリンク -->
<a href="/wp-content/uploads/source_code/example_code.ino" download>💾 ソースコードをダウンロード</a>

<script>
function toggleCode(header) {
  const content = header.nextElementSibling;
  content.style.display = (content.style.display === 'block') ? 'none' : 'block';
}
</script>

✅ 各機能の補足説明

📌 行番号の自動表示

  • <code><span>～</span></code> で行を囲むことで、CSSカウンタで自動的に行番号を追加しています。
  • 改行を <span>…</span> で表現しておくと正確に行番号が振られます。

📌 折りたたみ表示

  • .code-header をクリックすると .code-content の表示が block ↔ none に切り替わります。
  • 初期状態は非表示 (display: none)。

📌 ダウンロードリンク

  • /wp-content/uploads/source_code/example_code.ino に実際のソースコードファイル（.inoや.txtなど）をアップロードしておき、そこへリンクします。
  • 「メディア」からファイルをアップロードし、リンクURLを取得してください。

✅ 応用ヒント（便利な方法）

1. プラグインを使いたい場合は以下も検討：

  • SyntaxHighlighter Evolved
  • Prism.js（自分で追加も可能）
  • Enlighter

2. ソースコードが長いときのスクロール対策

  • max-height により、縦に伸びすぎるのを防いでスクロール対応にしています。

✅ 次にやるべきこと

  1. WordPress管理画面で「メディア」→ ソースコードをアップロード
  2. そのファイルのURLを <a href="…"> に反映
  3. HTMLブロックで上記コードをコピー・貼り付け
  4. <span> 内に自分のコードを書き換える（または自動化支援可能）

必要であれば、あなたのコードを貼り付けていただければ、自動で <span> に変換したHTMLを生成することもできます。
「このコードを表示したい」という元コードがあれば、どうぞお知らせください。

あなた:

以下のコードでお願いします。
// // 20kHzから40kHzのPWMをランダムな時間で制御するプログラム
// // ATtiny202 用のプログラム
// Arduino IDEでの設定は”Clock: 10MHz internal”で動作する。
// 書き込み装置: “SerialUPDI – SLOW 57600 baud”
// これらを設定したら”ブートローダーを書き込む”をクリックする。
// #define PWM_PIN PIN_PA6
// 矩形波の出力ピン (ICの2ピン)
// CCMPL の範囲を定義 #define CCMPL_MAX 160
// 25kHz #define CCMPL_MIN 100
// 50kHz
// 矩形波出力を開始 void startPWM(uint8_t ccmpl) { TCB0.CTRLA = 0;
// TCB0を無効化 (リセット) TCB0.CCMPL = ccmpl;
// 周波数設定 (8ビット分解能) TCB0.CCMPH = ccmpl / 2;
// 50% デューティ比 TCB0.CTRLB = TCB_CCMPEN_bm | TCB_CNTMODE_PWM8_gc;
// 8ビットPWMモード TCB0.CTRLA = TCB_ENABLE_bm | TCB_CLKSEL_CLKDIV2_gc;
// 分周2 (10MHzクロック) }
// 矩形波出力を停止 void stopPWM() { TCB0.CTRLA = 0;
// TCBを無効化 } void setup() { pinMode(PWM_PIN, OUTPUT);
// 出力ピンの設定 (PA6, ICの2ピン) } void loop() { while (1) { uint8_t ccmpl = random(CCMPL_MIN, CCMPL_MAX + 1);
// CCMPL範囲でランダム選択 startPWM(ccmpl); uint16_t onTime = random(100, 3001);
// 0.1秒～3秒 delay(onTime); stopPWM(); uint16_t offTime = random(100, 1001);
// 0.1秒～2秒 delay(offTime); } }

ChatGPT:

ありがとうございます。以下にご指定のコードを 行番号付き・折りたたみ表示・ダウンロードリンク付き で WordPress の固定ページに貼り付けられる形式で整形しました。

✅ WordPressに貼り付けるコード（HTMLブロック用）

  1. WordPressの固定ページを開き、カスタムHTMLブロックを挿入してください。
  2. 下記コードを そのままコピペ してください。
htmlコピーする編集する<style>
.code-box {
  border: 1px solid #ccc;
  margin-bottom: 1em;
  border-radius: 5px;
  overflow: hidden;
}
.code-header {
  background-color: #f0f0f0;
  padding: 0.5em;
  cursor: pointer;
  font-weight: bold;
}
.code-content {
  display: none;
  max-height: 500px;
  overflow: auto;
  background: #272822;
  color: #f8f8f2;
  font-family: monospace;
  padding: 1em;
  white-space: pre;
  counter-reset: line;
}
.code-content code {
  display: block;
  line-height: 1.5;
}
.code-content code span {
  display: block;
  counter-increment: line;
}
.code-content code span::before {
  content: counter(line);
  display: inline-block;
  width: 2em;
  margin-right: 1em;
  color: #999;
  text-align: right;
}
</style>

<div class="code-box">
  <div class="code-header" onclick="toggleCode(this)">
    ▼ ソースコードを表示/非表示
  </div>
  <div class="code-content">
    <code>
<span>//</span>
<span>// 20kHzから40kHzのPWMをランダムな時間で制御するプログラム</span>
<span>//</span>
<span>// ATtiny202 用のプログラム</span>
<span>// Arduino IDEでの設定は"Clock: 10MHz internal"で動作する。</span>
<span>// 書き込み装置: “SerialUPDI - SLOW 57600 baud”</span>
<span>// これらを設定したら”ブートローダーを書き込む”をクリックする。</span>
<span>//</span>
<span>#define PWM_PIN PIN_PA6  // 矩形波の出力ピン (ICの2ピン)</span>
<span></span>
<span>// CCMPL の範囲を定義</span>
<span>#define CCMPL_MAX 160  // 25kHz</span>
<span>#define CCMPL_MIN 100  // 50kHz</span>
<span></span>
<span>// 矩形波出力を開始</span>
<span>void startPWM(uint8_t ccmpl) {</span>
<span>  TCB0.CTRLA = 0;                                      // TCB0を無効化 (リセット)</span>
<span>  TCB0.CCMPL = ccmpl;                                  // 周波数設定 (8ビット分解能)</span>
<span>  TCB0.CCMPH = ccmpl / 2;                              // 50% デューティ比</span>
<span>  TCB0.CTRLB = TCB_CCMPEN_bm | TCB_CNTMODE_PWM8_gc;    // 8ビットPWMモード</span>
<span>  TCB0.CTRLA = TCB_ENABLE_bm | TCB_CLKSEL_CLKDIV2_gc;  // 分周2 (10MHzクロック)</span>
<span>}</span>
<span></span>
<span>// 矩形波出力を停止</span>
<span>void stopPWM() {</span>
<span>  TCB0.CTRLA = 0;  // TCBを無効化</span>
<span>}</span>
<span></span>
<span>void setup() {</span>
<span>  pinMode(PWM_PIN, OUTPUT);  // 出力ピンの設定 (PA6, ICの2ピン)</span>
<span>}</span>
<span></span>
<span>void loop() {</span>
<span>  while (1) {</span>
<span>    uint8_t ccmpl = random(CCMPL_MIN, CCMPL_MAX + 1);  // CCMPL範囲でランダム選択</span>
<span>    startPWM(ccmpl);</span>
<span></span>
<span>    uint16_t onTime = random(100, 3001);  // 0.1秒～3秒</span>
<span>    delay(onTime);</span>
<span></span>
<span>    stopPWM();</span>
<span></span>
<span>    uint16_t offTime = random(100, 1001);  // 0.1秒～2秒</span>
<span>    delay(offTime);</span>
<span>  }</span>
<span>}</span>
    </code>
  </div>
</div>

<!-- ダウンロードリンク -->
<p><a href="/wp-content/uploads/source_code/pwm_random.ino" download>💾 ソースコードをダウンロード</a></p>

<script>
function toggleCode(header) {
  const content = header.nextElementSibling;
  content.style.display = (content.style.display === 'block') ? 'none' : 'block';
}
</script>

✅ ダウンロードリンクの設定方法

  1. WordPress管理画面 →「メディア」→「新規追加」でファイル pwm_random.ino をアップロードします。
  2. アップロード後、表示されるURLをコピーして、以下の部分を書き換えます：
htmlコピーする編集する<a href="/wp-content/uploads/source_code/pwm_random.ino" download>

たとえば、URLが https://example.com/wp-content/uploads/2025/07/pwm_random.ino であれば：

htmlコピーする編集する<a href="https://example.com/wp-content/uploads/2025/07/pwm_random.ino" download>

✅ おまけ：コードの .ino ファイルが必要ですか？

ご希望があれば、上記コードを .ino ファイルにしてお渡しできます（アップロード用にZIP化など）。必要でしたらお知らせください。

何かデザインや機能を追加したい場合（例えば「コピー」ボタンやテーマ変更など）、遠慮なくご相談ください。

あなた:

WordPressの固定ページを開き、カスタムHTMLブロックを挿入してください。の説明にある 「カスタムHTMLブロック」は見当たりませんが？

ChatGPT:

ご安心ください。WordPressの「ブロックエディター（Gutenberg）」では、「カスタムHTML」ブロックはやや見つけづらい場所にありますが、以下の手順で簡単に挿入できます。

✅ 「カスタムHTMLブロック」の挿入手順（WordPress 6.8.x / Cocoon 子テーマ）

① 固定ページを編集画面で開く

  • WordPress管理画面 →「固定ページ」→ 該当ページの「編集」をクリック

② 画面左上の「＋」ブロック追加ボタンをクリック

  • 編集エリアの左上の「＋」マークをクリック
    　または段落の末尾にある「＋」でも可

③ 表示された検索バーに「html」と入力

  • 「カスタムHTML」ブロックが候補に出ます

④ 「カスタムHTML」をクリックするとブロックが追加されます

  • この中に、前回提示したHTMLコードをそのまま貼り付けてください

補足ヒント

  • 表示が少し異なる場合は、**画面右上の「ブロック挿入ツール（︙）」→「すべてのブロックを表示」**を試すと見つけやすくなります。
  • ブロックタイプを切り替える場合は、既存のブロック左側のアイコンをクリックして「変換」→「カスタムHTML」に変更可能です。

✅ テスト表示するには

貼り付けた後、「プレビュー」→「新しいタブで表示」をクリックすると、表示結果を確認できます。

もし「ブロックエディターではなくクラシックエディターを使っている」場合や、テーマ・プラグインが原因でブロックが制限されている場合もありますので、その場合はお知らせください。対応策をご案内します。

あなた:

提示いただいたプラグインを使う方法も試したみたいので「Enlighter」プラグインを インストールしてみましたが、画像にある状態の表示が行われません。 添付した画像は使われている方の画像をクリップしたものです。

ChatGPT:

ありがとうございます。画像を確認しました。この画像は「クラシックエディター（Classic Editor）」を使用している画面で、Enlighterプラグインの**「ソースコード挿入」ボタン（{}アイコン）**が表示されている状態です。

つまり、現在のあなたのWordPress環境では：

✅ 状況の確認と解決ステップ

❓ 「Enlighter」プラグインを有効化したが、アイコン（{}）が表示されない

これは以下の原因が考えられます：

✅ 1. クラシックエディターが有効になっていない

Enlighter の {} ボタンは、クラシックエディター用のUIです。

✅ 対応方法：

  1. プラグイン「Classic Editor」をインストール＆有効化
    → Classic Editor プラグイン（WordPress.org）
  2. WordPress管理画面 →「設定」→「執筆設定（Writing）」
    • 「旧エディター（クラシックエディター）を使用する」を選択
    • 「変更を保存」
  3. 投稿や固定ページの編集画面を開きなおす
    • {} アイコンが表示されるはずです

✅ 2. クラシックブロックを使う

もし「ブロックエディター（Gutenberg）」を使いたいが、Enlighterを併用したい場合：

方法：

  1. 「＋ブロック追加」→「クラシック」ブロックを選択
  2. クラシックブロック内で {} アイコンが表示されるようになります

✅ Enlighter のコード挿入手順（クラシックUI）

  1. {}ボタンを押すと、専用のコード挿入ウィンドウが開く
  2. コードを貼り付けて、言語を選択（例：C++, Arduinoなど）
  3. 「OK」でコードが

[enlighter] ショートコード形式で埋め込まれます 



html












[enlighter lang="cpp"]

void setup() {

Serial.begin(9600);

}

[/enlighter]










✅ まとめ





状況解決策
Enlighterを使いたいが{}が出ないClassic Editorプラグインを導入・有効化
Gutenbergでも使いたい「クラシックブロック」内で使う
もっと高度な表示や自作カスタムしたいEnlighterをショートコード形式で使う、またはHTML/CSS方式に切り替える










必要であれば、Enlighter用のショートコード付きコードも作成いたします。どのエディターで作業しているか（クラシック or ブロック）も教えていただければ、最適化します。





あなた:





ご提示いただいた手順で「Enlighter」を使えました。 期待していた表示に近いですが、ソースコード全体表示になるのが残念でした。 ソースコードの表示を折り畳めると便利ですね。 通常はブロックエディタを使っています。





ChatGPT:





ご確認ありがとうございます。「Enlighter」プラグインが使えるようになったとのことで安心しました。










✅ 次のステップ：「Enlighter」のコードブロックを折りたたみ可能にする





残念ながら Enlighter 単体では折りたたみ表示機能（アコーディオンなど）は標準で付いていません。
ただし、ブロックエディターを使いながら Enlighter のコードブロックを折りたたむ方法はあります。










✅ 方法①：Enlighterのショートコードをアコーディオンブロックで包む（CSS＋HTML）





🔧 手順





    

  1. WordPressの固定ページ編集画面で「カスタムHTMLブロック」を追加
    2. 




  2. 以下のコードを貼り付けてください（Enlighterのショートコードを内包）
    3. 






htmlコピーする編集する<style>
.toggle-code-container {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 1em 0;
}
.toggle-code-header {
  background: #f0f0f0;
  padding: 0.5em;
  cursor: pointer;
  font-weight: bold;
}
.toggle-code-body {
  display: none;
  padding: 0.5em;
}
</style>

<div class="toggle-code-container">
  <div class="toggle-code-header" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'block' ? 'none' : 'block'">
    ▼ ソースコードを表示/非表示
  </div>
  <div class="toggle-code-body">




[enlighter lang="cpp" linenumbers="true"]

void setup() {

Serial.begin(9600);

}


void loop() {

Serial.println("Hello");

delay(1000);

}

[/enlighter]





</div> </div>





🔍 ポイント





    

  • toggle-code-header をクリックすると toggle-code-body の表示が切り替わります。
    • 




  • Enlighterのショートコード [enlighter]...[/enlighter] を内側に含めればOK。
    • 




  • 折りたたみ部分は Enlighterのテーマやハイライト表示に影響しません。
    • 











✅ 方法②：Enlighterのコードを「クラシックブロック＋アコーディオンブロック」で組み合わせ





    

  1. 「クラシック」ブロックで Enlighter を使う
    2. 




  2. Cocoonや他のテーマの「アコーディオン」ブロックを利用して囲む
    3. 






※ Cocoonテーマでは、ショートコード [open title="表示/非表示"]...[/open] が使える場合もあります。










✅ 例（Cocoonの 




[open] ショートコード使用例）



text












[open title="▼ ソースコードを表示/非表示"]

[enlighter lang="cpp" linenumbers="true"]

void setup() {

Serial.begin(9600);

}

void loop() {

Serial.println("Hello");

delay(1000);

}

[/enlighter]

[/open]










✅ まとめ





方法内容特徴
方法①HTML＋CSSで折りたたみEnlighterと完全互換、自由度高い
方法②Cocoonなどの 




[open] ショートコード使用
手軽・プラグイン不要（Cocoon前提）


方法③
HTML/CSS自作コード表示
Enlighter非依存で完全カスタム可能












ご希望に応じて、あなたの実際のコード（例：pwm_random.ino）をこの形式で折りたたみ可能にして整形しますので、お申し付けください。
あなた:
方法①と方法③もいいですが、通常使用には手間がかかるのでなるべくシンプルに扱いたいと思うので
「方法②　Cocoonなどの [open] ショートコード使用」の方法に興味があります。
どのように使いますか？
ChatGPT:

素晴らしい選択です！

「方法②：[open]ショートコードを使う方法」は、Cocoonテーマでもっともシンプルで使いやすい方法です。

Enlighter と組み合わせても動作するため、**「コード表示」＋「折りたたみ」**が簡単に実現できます。

✅ [open] ショートコードの基本構文（Cocoonテーマ）



text












[open title="▼ ソースコードを表示/非表示"]

ここに折りたたむ内容を入れる

[/open]





    

  • title="..." の部分はクリック表示されるタイトル（ラベル）
    • 




  • 中にEnlighterの [enlighter]...[/enlighter] を入れると、コード＋折りたたみ表示が同時に実現できます
    • 











✅ 例：あなたのPWMコードをEnlighter＋




[open]で折りたたむ

WordPressの通常の段落ブロックやコードブロックに、以下をコピペして使えます：




text












[open title="▼ ソースコードを表示/非表示"]

[enlighter lang="cpp" linenumbers="true"]

// 20kHzから40kHzのPWMをランダムな時間で制御するプログラム

// ATtiny202 用のプログラム

// Arduino IDEでの設定は"Clock: 10MHz internal"で動作する。

// 書き込み装置: “SerialUPDI - SLOW 57600 baud”

// これらを設定したら”ブートローダーを書き込む”をクリックする。


#define PWM_PIN PIN_PA6  // 矩形波の出力ピン (ICの2ピン)


// CCMPL の範囲を定義

#define CCMPL_MAX 160  // 25kHz

#define CCMPL_MIN 100  // 50kHz


// 矩形波出力を開始

void startPWM(uint8_t ccmpl) {

TCB0.CTRLA = 0;                                      // TCB0を無効化 (リセット)

TCB0.CCMPL = ccmpl;                                  // 周波数設定 (8ビット分解能)

TCB0.CCMPH = ccmpl / 2;                              // 50% デューティ比

TCB0.CTRLB = TCB_CCMPEN_bm | TCB_CNTMODE_PWM8_gc;    // 8ビットPWMモード

TCB0.CTRLA = TCB_ENABLE_bm | TCB_CLKSEL_CLKDIV2_gc;  // 分周2 (10MHzクロック)

}


// 矩形波出力を停止

void stopPWM() {

TCB0.CTRLA = 0;  // TCBを無効化

}


void setup() {

pinMode(PWM_PIN, OUTPUT);  // 出力ピンの設定 (PA6, ICの2ピン)

}


void loop() {

while (1) {

uint8_t ccmpl = random(CCMPL_MIN, CCMPL_MAX + 1);  // CCMPL範囲でランダム選択

startPWM(ccmpl);


uint16_t onTime = random(100, 3001);  // 0.1秒～3秒

delay(onTime);


stopPWM();


uint16_t offTime = random(100, 1001);  // 0.1秒～2秒

delay(offTime);

}

}

[/enlighter]

[/open]










✅ 表示イメージ（クリックすると開閉）





▼ ソースコードを表示/非表示
（クリックで中のコードが展開）










✅ 補足：使い方のヒント





    

  • Enlighterの lang="cpp" → Arduinoなら "arduino" にしてもOK
    • 




  • Enlighter の行番号は linenumbers="true" でON、falseでOFF
    • 




  • 文章の途中でも [open]...[/open] を差し込んで使えます
    • 











✅ 必要条件





    

  • テーマが「Cocoon」
    • 




  • 





[open] ショートコードが有効（デフォルトで有効）




✅ ダウンロードリンクを追加するには？


[/open]





のあとに以下を追記：





textコピーする編集する[btn href="https://example.com/wp-content/uploads/pwm_random.ino" rel="nofollow" class="download"]💾 ダウンロード[/btn]






Cocoonには [btn]...[/btn] でボタン表示もできます。










ご希望があれば、WordPressに貼る用にすべて整えた状態のもの（ファイル＋HTML）を一括でご用意します！お気軽にどうぞ。





あなた:





「WordPressの通常の段落ブロックやコードブロックに、以下をコピペ」で コピーしたものを貼り付けると画像の状態になります。





ChatGPT:





画像ありがとうございます。現在、ショートコード 




[open] と [enlighter] を使ったコードを「ショートコードブロック」に入力しているようですが、期待通りに動作せず、単なるプレーンテキストとして表示されているように見えます。


この現象は「Cocoonテーマでショートコードが有効な場所」と「ブロックエディタの種類」によって起きることがあります。




✅ 解決方法：「カスタムHTML」ブロックに貼り付ける


「ショートコードブロック」では [open]...[close] の中に [enlighter] をネストすると動かない場合があります。


以下のように 「カスタムHTMLブロック」 を使って入力してみてください：


▼手順：


    

  1. 

    ブロックエディタの「＋」ボタンを押す。
    

    2. 

  2. 

    「カスタムHTML」と検索して 「カスタムHTMLブロック」 を追加。
    

    3. 

  3. 

    以下のコードを そのまま貼り付け：
    

    4. 





html












[open title="▼ ソースコードを表示/非表示"]

[enlighter lang="cpp" linenumbers="true"]

// 20kHzから40kHzのPWMをランダムな時間で制御するプログラム

// ATtiny202 用のプログラム

// Arduino IDE の設定は“Clock: 10MHz internal”で動作する。

// 書き込み装置は “SerialUPDI - SLOW 57600 baud”

// →これらを設定したら“ブートローダーを書き込む”をクリックする。

// #define PWM_PIN PIN_PA6 // 矩形波の出力ピン（ICの2ピン）

// --- 中略 ---

void startPWM(uint8_t ccmp1) {

TCB0.CTRLA = 0;                       // TCB0を無効化（リセット）

TCB0.CCMPH = ccmp1;                  // 周波数設定（8ビット分解能）

TCB0.CCMPL = ccmp1 / 2;              // 50% デューティ比

TCB0.CTRLB = TCB_CCMPEN_bm | TCB_CNTMODE_PWM8_gc;

// 8ビットPWMモード

TCB0.CTRLA = TCB_ENABLE_bm | TCB_CLKSEL_CLDIV2_gc;

// 分周2（10MHzクロック）

}

[/enlighter]

[/open]





    

  1. 「プレビュー」または「公開」で動作を確認します。
    2. 











✅ 表示例（実現されること）：





    

  • 折りたたみタイトルとして「▼ ソースコードを表示/非表示」が表示。
    • 




  • 折りたたみ部分をクリックするとソースコードが展開。
    • 




  • Enlighter により、行番号付き・ハイライトされたコード表示。
    • 











🔍補足：なぜ「ショートコードブロック」だとうまく動かない？





WordPress のショートコードブロックは「1階層のショートコード」に向いています。
今回のように [open] の中に [enlighter] を ネスト（入れ子）すると、ショートコードが展開されず、テキストとしてそのまま出力されることがあります。










✅ 解決のキーワード





    

  • Cocoonでは [open] ショートコードが使える
    • 




  • Enlighter は [enlighter] ショートコードで表示可能
    • 




  • ネスト時は「カスタムHTMLブロック」を使用する
    •
ホーム
ChatGPT支援記録