そして伝説になりたかった

働きたくない男の雑記・備忘録

【WP】コピペで実装!記事内に広告を挿入するボタンを設置する

投稿日:2019/11/5 最終更新日:2020/05/12 閲覧数:440

カテゴリー: WEB>

広告タグをいちいち「前の投稿からコピペしてくる」という、楽しい運用にはもう付き合っていられないので、ボタン1つでコードを挿入できるようにカスタマイズしました。

記事終わりの広告等であればテンプレ編集で良いのですが、記事の途中に入れたい場合、めんどくさくてしょうがないですよね。

記事投稿のストレスを減らすことは、とても重要なことだと認識しています。

僕みたいなめんどくさがりは
「こんなネタを思いついたけど記事にするのめんどくさいからネタ帳に書いて終わり」

なんてことになりかねないので。





どうやるの?

「ショートコード」



「クイックタグ」

というものを使用します。


要約すると、
「クイックタグ」とは記事編集画面上にある、文字列挿入ボタンのことです。


これです。クイックタグ。

このボタンで「ショートコード」を挿入し、「ショートコード」に「広告タグに変換する」という機能を与える、という操作になります。

function.phpを弄るので、phpに自信のない方は、もう少し自信をつけてから出直しましょう。

ショートコードの作成

ショートコードとは、
[abcdefg][/abcdefg]

といった形式で記述する、htmlタグのワードプレス専用版みたいなものです。

ワードプレスではこのショートコードを、ユーザーはお好みで設定することができます。

今回は
自動でgoogle広告タグに置き換わる
[ads_display_test][/ads_display_test]

というショートコードを作成します。

以下をfunction.phpへ貼り付け。


<?php
//ショートコード
function adsdisplay_shortcode( $atts ) {
	return '<div class="adsBox" style="padding:12px 24px;">
		<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- ディスプレイ -->
		<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-000000000000000" data-ad-slot="0000000000" data-ad-format="auto" data-full-width-responsive="false"></ins>
		<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
	</div>';
}
add_shortcode( 'ads_display_test', 'adsdisplay_shortcode' );
?>

※phpタグは適宜消してください
※google広告タグはご自身で発行して置き換えてください

これで記事投稿画面に
「[ads_display_test][/ads_display_test]」

と書くと、書いた場所に広告が表示されるようになりました。

が!
コピペが必要なことに変わりはないので、もうひと手間加えます。

クイックタグの作成

次にクイックタグの設定です。

記事の上の方にも貼りましたが、これがクイックタグです。


改めて。クイックタグ。

見てわかると思いますが、僕のクイックタグ欄とあなたのクイックタグ欄は内容が違うと思います。

そうです。
カスタマイズできるのです。

以下をfunction.phpへ貼り付け。


<?php
//投稿クイックタグ
function add_qtag() {
    if (wp_script_is('quicktags')){
?>
        <script type="text/javascript">
        QTags.addButton('adsdisplay','ディスプレイ広告','[ads_display_test][/ads_display_test]','','','adsenseディスプレイ広告挿入',1);
		
        </script>
<?php
    }
}
add_action('admin_print_footer_scripts','add_qtag');
?>

※phpタグは適宜消してくださいね。

あぁ、楽だ。

できましたでしょうか。

ショートコードはとても便利なので他にもたくさん作ると捗ると思います。

よく見られている記事

おすすめの記事

管理人について

高専へ入学するがプログラミングが嫌いという理由で機械科を選択。その後勉強が嫌いという理由で高専退学。グラフィックデザインの仕事ができると騙され20歳からweb業界へ就職するも、大嫌いなプログラミングをさせられ続ける毎日が待っていた。未だにプログラミング地獄から脱出できないでいる。

その他管理人についてはこちら
プロフィールとか


コメントを残す