WordPressサイトにコイブミを設置する方法について

ガタガタです。WordPressサイトにコイブミを設置する方法について、お問い合わせがありましたので回答します。

当人さんの実際のサイトの詳しい状況がわからないので、正確な回答にはなっていないかもしれませんが、下記の点に気を付けていただければ、WordPressサイトにも問題なく設置できるはずです。参考にしてください。

WordPressサイトにコイブミを設置できるか

結論から言うとできます。当サイトもWordPressを導入していますが、今のところコイブミは問題なく動いているようです。

ですがWordPressサイトに設置するのには少し特殊な作業が必要です。以下説明します。

WordPressのプログラムが影響しないディレクトリを作る

WordPressが導入されているサイト内に、自作のHTMLやPHPなどのファイルを置いてそこにアクセスしようとすると、正常に動作しなくなる場合があります。これは平たく言うと、サイトに入っているWordPressが「このファイルもWordPressのプログラムの一部なんだな」と誤認して、アクセスがあった際になんらかの動作を加えてしまうためです。

なので、WordPressが影響しないディレクトリを作成し、その中にコイブミのプログラムを設置する必要があります。

外部サイトですが、上記記事にWordPress内に自作のHTML・PHPなどを設置する方法が書かれていますので、参考にしてください。

コードを正しく記述する

WordPressの「投稿」や「固定ページ」の本文を記述するテキストエディタに、コイブミのフォームのコードのような複雑なコードを直接記述すると、高確率で意図しない挙動になってしまいます。

これはWordPressに備わっているタグの補完機能のせいです。WordPressでは、テキストエディタ内の改行のあるところに<br>タグや<p>タグ、<div>タグなどを勝手に挿入してしまう場合があります。

なので、ページ本文にコードを直接書き込むのではなく、ショートコードを使ってコイブミのフォームを呼び出す方法をおススメします

こちらも外部サイトですが、ショートコードについての概要がまとめられています。

お使いのテーマ内のfunctions.phpに、以下のように記述していただくと、投稿または固定ページ本文内に[koibumi_shortcode]と記述すれば、コイブミの投稿フォームが生成されるようになるはずです。

function add_koibumi_shortcode() {
ob_start();
?> 
<!-- コイブミここから -->
<div id="koibumi_wrap">
<div id="koibumi_form">
<input type="hidden" name="" value="" id="koibumi_token">
<input type="text" name="" value="" id="koibumi_text" placeholder="ひとこと送る">
<button type="submit" id="koibumi_btn">送信</button>
</div>
<p class="attention">メッセージは<span id="koibumi_limitMessage"></span>文字まで、同一IPアドレスからの送信は一日<span id="koibumi_limitIP"></span>回まで</p>
<p id="koibumi_alert" style="display: none;"></p>
<!-- お礼メッセージここから -->
<div id="koibumi_thanks" style="display:none;">
<div class="box">
<img src="(ここにお礼絵のURL)" alt="THANK YOU!">
<p>ありがとうございます!</p>
</div>
</div>
<!-- お礼メッセージここまで -->
</div>
<!-- コイブミここまで -->
<?php
return ob_get_clean();
}
add_shortcode( 'koibumi_shortcode', 'add_koibumi_shortcode' );

このほかにもショートコードが使えるようになるといろいろな便利なことができるようになります。functions.phpを編集する必要があるため、少し敷居は高く感じるかもですが、ぜひ挑戦してみてください。(functions.phpのバックアップは必ず取ってくださいね)

以上です。無事にコイブミが設置できることを祈っています!