ちょっと前に有料記事を販売したいっていう依頼があって初めて知った「Codoc」というサービス。

有名な「note」と似たサービスで、WordPress用のプラグインが提供されていて、それを導入すれば、投稿内に「ここから先は有料ですよ！」という風なコンテンツが作れるようになっています。

と言いながら、現状有料記事を作る予定はなく、タイトルにあるように投げ銭システムを使ってみたい！だけなので、詳しくは公式サイト、もしくは運営ブログを参照ください。

ユーザー登録は簡単で、他の会員制サイトと同様にニックネーム・メールアドレス・パスワードを入力して登録、確認メール内のリンクをクリックすればすぐに完了します。

Stripeという決済サービスと連携しているようですので、画面右上のメニューからその他の情報の登録は早めに済ませておいた方がいいかも知れません。登録には身分証明書のアップロードが必要ですので準備をお忘れなく！

ユーザー登録が終わったら早速投げ銭機能を設定してみようと思って、codoc内の運営ブログに掲載されているブログに投げ銭機能を追加する方法を見てみたものの、現在の画面とは手順が違うようですが、メニューパネルを見ればすぐに「投げ銭機能」の設定ができるので、多分戸惑うことはないと思います。

今回は、codoc内の設定の仕方ではなく、たくさんあるcodoc投げ銭機能をWordPressサイトへ導入するためのページではほとんど紹介されていない、せっかくWordPress使ってるんだからなるべく手間なく設置しようというのが本記事の内容です。

2021年10月12日現在、本サイトでも記事本文下へ設置していますので、「わぁ、これいいわ～」と思ったらぜひ投げ銭をお願いします（笑）。

ページ上部へ戻る▲

codocの投げ銭システムを全ての投稿・固定ページ本文末尾へ一発で挿入する方法

多くの紹介ページでは、前述したようにcodoc内の設定方法が丁寧に画像付きで紹介されているものの、設置に関しては人海戦術で的にさらっと書かれているものがほとんどです。

でも、WordPressなんだからWordPressらしくガバっと全記事に反映させよう！というのを以下の手順です。

この方法はテーマの「functions.phpへのコード追記」を行うスキルが必要です。また、お使いのテーマによっては「デザインの調整」が必要となります。

１．テーマのfunctions.phpへコードを追加

以下のコードをテーマのfunctions.phpへ追記します

/***** Codocの投げ銭コンテンツ *****/
/* スクリプトをフッターで読み込む */
function habone_codoc_script(){
	$codoc_script = '<script src="https://codoc.jp/js/cms.js" data-css="black" data-usercode="mi10FiqexA" charset="UTF-8" defer></script>';
	if(is_singular()){
	echo $codoc_script;
	}
}
add_action('wp_footer','habone_codoc_script');

/* コンテンツを表示 */
function habone_codoc_content( $content ) {
	$codoc_before ='<article>';
	$codoc_head = '<h3>サイトへの支援をお願いします</h3>';
	$codoc_info = '<p>最後までお読みいただきありがとうございました。本記事の内容がお役に立てましたら幸いです。<br>今後もよりよい情報を提供し続けることができるよう、投げ銭によるサイトへの支援、およびSNSによる拡散をお願いします</p>';
	$codoc_after ='</article>';
	$codoc_script = '';
	$codoc_content = 'codocのHTMLコード';
	if(is_singular()){
return $content. 
	$codoc_before. 
	$codoc_head. 
	$codoc_info. 
	$codoc_after. 
	$codoc_script. 
	$codoc_content;
	}else{
		return $content;
	}
}
add_filter( 'the_content', 'habone_codoc_content', 10 );

次項の修正を行うまではfunctions.phpの更新をしないでください

２．コードの修正と保存

コード中の「codocのHTMLコード」となっているところをご自身の投げ銭コード（要素のみ）へ変更してfunctions.phpを更新します。

「codocのHTMLコード」はcodocの「貼り付けタグを表示」をクリック後に出てくる以下の画面右側（赤枠の方）のコードです。

無事に更新できたら、サイト内の投稿や固定ページを開いてみてください。ね、何もしなくても投げ銭コンテンツが本文下へ表示されますよね。これでいちいち挿入する手間も、逆に使わなくなったときに外す手間も要りません。

一応クリックして別画面（コメントと金額の設定）が動作するかどうかの確認をしてください

あとはお好みに応じてコード内の文言を修正すればOKです。

• 一応検索エンジン等からページ内の１つの部品として認識されるよう<article>タグでくくっていますが、必要なければ前後の<article></article>を削除いただいて構いません
• 投げ銭コンテンツの上にh3タグでタイトル、pタグで簡単な説明を入れていますが、サイトによってはデザインの調整が必要です（これらの表示が必要なければ削除しても構いません）

以下、コードの説明とカスタマイズ例を紹介しておきますので参考にどうぞ。

codoc投げ銭コンテンツ一括挿入用コードの説明

codocの投げ銭コンテンツを挿入するためのコードは、「codocから情報を取得するためのスクリプト」と「実際に表示をさせるためのHTML」で構成されています（他社の広告コンテンツなども基本この構造です）

まず前半の部分はスクリプトの読み込みを行うコードになります。スクリプトの読み込みはサイト外部のcodocへ接続して行うので、状況によっては読み込みに時間がかかってしまって表示が遅くなることがあるため、上記コードでは、コンテンツと同時ではなく、ページのフッター（一番最後に読み込まれる場所）で読み込みを行うようにしています。

後半はHTML（codocでいう「要素のみ」）を、投稿本文の下へ出力しなさいというコードです。

また投げ銭コンテンツは、固定ページや投稿そのもので表示させるもので、トップページやアーカイブページなどでは必要がないので、どちらのコードも、必要ない場所では出力や処理を行わないようにして、ページ表示速度への影響を抑えています。

コードのカスタマイズ例

コード内にある以下の部分で、「投稿・固定ページそのもの」という条件を加えています

if(is_singular()){
内容
}

is_singularというのは単一ページですよ！という条件関数で、基本的には投稿・固定ページそのものに限定したい場合に使用します。もしも投稿のみとしたい場合には

if(is_singular('post')){
内容
}

とすれば、単一ページの中でも「投稿（post）」だけに限定できますし、カスタム投稿タイプを使っているサイトで投稿と何かのカスタム投稿タイプというのを指定したければ以下のようにすればよいでしょう。

if(is_singular(array('post','カスタム投稿タイプのスラグ'))){
内容
}

さらに、「このカテゴリー限定で」「このタグがあるものだけ」などいろいろと条件は指定できますが、そちらはご自身でお調べになってみてくださいね（is_category　is_tagなどで検索すれば出てきます）

余談ですが、プラグインをたくさん使うと表示速度が下がるって話をよく聞かれると思いますが、原理は今回の措置と同じで、プラグイン自体は動作に不具合が起きないよう、サイトごとの条件に関係なくいろいろなものをすべてのページで出力・処理するようにしているために速度に影響が出ることがあるというだけで、プラグインの数とは直接関係ありませんので、予備知識として持っておくといいでしょう。

テーマへデザインコードを追加しても反映されないときは

挿入した投げ銭コンテンツのデザインを変えたいとき、少しカスタマイズを知っている方なら「テーマの追加CSS」や「子テーマのCSS」へ書けばいいんでしょ！と思うかも知れません。

ただ、テーマによっては、この方法では設定が反映されない時もしばしばあります。

原因は、そのデザイン用コードがどの順番で読み込まれているかの問題であることがほとんどです。

codocのコンテンツは、超簡単に解説すると、挿入するhtml（要素のみ）をcodoc側へ一度投げ、帰ってきたものを表示するようになっています。

CSSは例外を除き、ページ出力されるCSSの順番が後ろにあるものが優先して適用されますから、テーマのCSSよりも後でcodocのデザインコードが読み込まれれば、いくらテーマ側に追加をしても無駄ということになります。

もしも、テーマへ追加したCSSが効かない場合は、codocの投げ銭コンテンツの設定画面（デザイン）でCSSを追加できるようになっていますから、そこへカスタマイズコードを記述するようにすれば問題は解決します。

以上、codocの投げ銭システムをWordPressへ導入する方法でした。

最後に、どうでもいい話なんですけど、ずっと「コドック」だと思っていたのですが、「codoc」を「コードク」って読むの初めて知りました（笑）。公式サイト内をいろいろと見てみましたが名前の由来はありませんでした。至って個人的な認識ですが、「購読」という意味なのでは？（本当にどうでもいいことですみません）。

ウェブページ上で物やコトを販売するのって結構大変ですし、物販アフィリエイトでは本当に雀の涙しか収益になりませんが、こういうシステムで少しでも足しになればありがたいですね。

・・というわけで、ぜひとも私にも↓↓から施しを！！