【AIに記事を書いてもらう人向け】WordPress囲み枠を使いたい！ショートコードを作る

最近、AIを使ってブログ記事を書いてもらう人が増えてきました。

ブログ記事の自動化とか量産とか聞きますよね。

私も文章力がないしまとめ方もうまくないのでAIによく頼んだりしています。

わたし

余白を入れてください！

・・・余白になってない・・・

わたし

余白のコードは　<div>…..</div>　なのでそれを入れてください！

・・・変なコードが入って消さなきゃいけなくなった・・・

と、記事のレイアウトをいちいち直したりして時間がかかりました。

レイアウトもAIに任せられるようになればいいなと思って調べたらいい方法があったので、今回紹介したいと思います。

ちなみに、今回紹介する方法は囲み枠を使った方法なのですが、囲み枠はブロックの中に文字を入れるという作業があるので少し複雑。

ブロックを使って文字入れなどをしない「スペーサー」（余白を入れるもの）は、cocoonの「テンプレート」機能を使えばめちゃ簡単にショートコードを作ることができます。

ショートコードが作れれば、AIにそれを渡せば楽に記事がかけるようになります。（詳しい方法は下記記事をご参照ください！）

【AIに記事を書いてもらう人向け】記事に余白を入れたい！Cocoonのテンプレート機能でショートコード化する手順

Cocoonのテンプレート機能を使うと、セクション間の余白をショートコード一つで入れられます。スペーサーのdivを毎回貼り直さずに済むので、AIに記事を書いてもらう人にも便利でした。登録手順を画像つきでまとめています。

今回はブロック機能を使って文字入れをするという一つ複雑な作業になるので、コードをいじる必要がありました。

コードに見覚えがない方は、難しいと感じるかもしれません。

正直コード見慣れている私も「めんどくさいな・・・」と思いました（PHPファイルをGit管理してて普通よりめんどくさい。でもGit管理の方が管理しやすい）が、簡単でした！

しかも一度作ってしまえば、今後かなり楽ができる！

お勧めしたいです！

やりかた
1. ショートコードの作成
2. 使い方
複数登録したい場合
1. 完成図
2. それぞれの枠のコード（上から順）
AIに頼み方
まとめ

やりかた

一回PHPファイルを作成しておけば、その後も繰り返し使えるので試してみてください。

ショートコードの作成

① WordPressで囲み枠を使った文章（設定だけの場合は簡単に「あああ」とかでOK）を書く
　（あとで文字のところをコードに書き換えるため）

② 下書き保存

③ 右上の…をクリック

④ 下にある「コードエディター」をクリック

⑤ そうするとHTMLやコメントアウトが出てくる

⑥ ここのショートコードにしたい部分のHTMLをコピペ！
（コメントアウトも含めてコピペでOK！）

例）ここでは囲み枠をコピペしました。

　👇編集画面

　👇コードエディターに変更後に出てきたコード

これをコピペします。

コメントアウトとは　<!– wp:cocoon-blocks/blank-box-1　から書いてあるコードのことです。
これも含めてコピペでOK！

⑦ ここで一旦バックアップを取っておきましょう！！！

　バックアップは「UpdraftPlus」が便利です！

⑧ cocoonダッシュボードの左側「外観」→「テーマファイルエディター」
　（自分でVScodeなどのコードエディターで作成している場合は、そちらを開いてください）

⑨ 画像①cocoonの子テーマか確認！！

　子テーマにしていない人は、子テーマの設定をしてからにしてください。

　cocoonの子テーマの設定は簡単なのでしておきましょう。

　方法は別記事にて紹介しているのでここでは説明を省きます。

【Wordpress】CSSの追加には子テーマを使用しよう！

どうも、Web初心者でも簡単にサイト開設できるWordpressを気に入っているものです。自分のサイトが出来たらデザインも変えてみたいなと思いますよね。今回はCSSの追加について説明します。CSSとはCSS（Cascading Style …

⑩ 画像②ThemeFunctions（functions.php）と書いてあるところをクリック

⑪ 画像③　//以下に子テーマ用の関数を書く　というコメントの下に下記コードをコピペ

function cocoon_check_shortcode($atts, $content = null){
    $block = <<<HTML

 // ここにコピペしたコードを貼る

HTML;
    return do_blocks($block);
}
add_shortcode('sample', 'cocoon_check_shortcode');

⑫ 「//ここにコピペしたコードを貼る」と書いたところに最初にコピペしたコードを貼る

⑬ コードの中の編集

（１）記事で書いた文章のところ（例文でいうと「<p>あああ</p>」の部分）を「{$content}」に変える

<!-- wp:cocoon-blocks/blank-box-1 -->
<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box"><!-- wp:paragraph -->
<p>あああ</p>
<!-- /wp:paragraph --></div>
<!-- /wp:cocoon-blocks/blank-box-1 -->

（２）一番下のadd_shortcode('sample', 'cocoon_check_shortcode');の「sample」のところはわかりやすい任意の名前を入れる（これが後に使うショートコードの名前になる）

コード完成例）
　　↑で使用した囲み枠のコードをいれました

function cocoon_check_shortcode($atts, $content = null){
    $block = <<<HTML
<!-- wp:cocoon-blocks/blank-box-1 -->
<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box"><!-- wp:paragraph -->
{$content}
<!-- /wp:paragraph --></div>
<!-- /wp:cocoon-blocks/blank-box-1 -->
HTML;
    return do_blocks($block);
}
add_shortcode('point', 'cocoon_check_shortcode');

cocoonを使ってて、先ほどのスクショにある囲み枠を使いたい場合は↑のコードをコピペして貼り付けてOK！（動かなかったら教えてください！）

⑭ 画像④ 「ファイルを更新」をクリック

これで、もうショートコードの設定は終わりました！！！

使い方

① 使いたい記事を開く

② 先ほど設定したコードの一番下 add_shortcode('sample', 'cocoon_check_shortcode'); の「sample」 のところに入れた任意の名前を確認

③ [ ] を最初に書いたら、その中に文章を入れて [ / ] で閉じる

例）最後のコードを add_shortcode('point', 'cocoon_check_shortcode');　と書いた場合

[point]
あいうえお
かきくけこ
[/point]

改行もOKです！

こうやって書いたら

しっかり囲み枠の中に文章が出力されました！！

複数登録したい場合

枠の中でも色々ありますよね。

複数設定する場合は、関数を変更しないといけません。

cocoonを使っている方で囲み枠を使いたい方は、私が作ったコードを置いておくので使ってください！

完成図

それぞれの枠のコード（上から順）


//==============================
// ショートコード[point] ポイント・チェック枠
//==============================
function cocoon_point_shortcode($atts, $content = null){

    $content = wpautop(do_shortcode($content));

    $block = <<<HTML
<!-- wp:cocoon-blocks/tab-box-1 -->
<div class="wp-block-cocoon-blocks-tab-box-1 blank-box bb-tab bb-check block-box">
$content
</div>
<!-- /wp:cocoon-blocks/tab-box-1 -->
HTML;

    return do_blocks($block);
}
add_shortcode('point', 'cocoon_point_shortcode');


//==============================
// ショートコード[attention] 注意枠
//==============================
function cocoon_attention_shortcode($atts, $content = null){

    $content = wpautop(do_shortcode($content));

    $block = <<<HTML
<!-- wp:cocoon-blocks/icon-box -->
<div class="wp-block-cocoon-blocks-icon-box common-icon-box block-box information-box">
$content
</div>
<!-- /wp:cocoon-blocks/icon-box -->
HTML;

    return do_blocks($block);
}
add_shortcode('attention', 'cocoon_attention_shortcode');


//==============================
// ショートコード[box] 強調枠
//==============================
function cocoon_box_shortcode($atts, $content = null){

    $content = wpautop(do_shortcode($content));

    $block = <<<HTML
<!-- wp:cocoon-blocks/blank-box-1 -->
<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
$content
</div>
<!-- /wp:cocoon-blocks/blank-box-1 -->
HTML;

    return do_blocks($block);
}
add_shortcode('box', 'cocoon_box_shortcode');