[hello]
今回は冒頭のあいさつで使用している会話ふきだしをショートコードで使えるようにする方法を紹介します
AFFINGER5のカスタム例となりますので他のテーマをご利用の方の参考にはならないと思います。ご了承ください
WordPressテーマ 「WING（AFFINGER5）」
いったい何のことかという方のために説明すると
これ👇のことです
これ、毎回打っても良いのですが、Twitterへのリンクも載せているので毎回打つ手間を省きたいなと思いショートコードを作りました
目次
事前準備
まずはバックアップを取りましょう
いきなり変更して何らかの理由で上手く動作しなかったとき、今までのブログに関する設定がパーになったりブログ自体が表示できないなんてことにもなりかねません
時間を無駄にすることになったり、ページが表示されなくなったりするかもしれなくなってもけろちゃんは責任を負えないので絶対にバックアップしておいた方が良いです
というのも、けろちゃんは一度画面が真っ白になる経験をしたので声を大にして言います
バックアップしないとこう👇なっちゃいますよ😱😱😱
テーマエディターを編集する
バックアップが取れたらいよいよ変更を加えていきます
まずは管理画面のメニューから
外観＞テーマエディター
を選びます
右上の方に
編集するテーマを選択
というのがあると思うので、ここを
WING-AFFINGER5 Child
にします（デフォルトでなってると思います）
必ずWING-AFFINGER5 Childを編集するようにしてください
変更したら、その下のテーマファイルから
テーマのための関数（function.php）
を選択してください
ずら～っとコードが書いてありますが、１番下まで移動してオリジナルのショートコードを追記していきます
ショートコードを追加する
では実際にショートコードを追加していきましょう
会話文のショートコードの追加では大きく分けて2つのコードを追加します
他のやり方もあると思うのであくまでけろちゃん流となります
まず内容の部分です
今回はhelloFuncという関数名を付けましたが自由に設定してください
けろちゃんのショートコードはこちら👇となります
function.php
function helloFunc() {
if ( trim( $GLOBALS["stdata131"] ) !== '' ) {
$kaiwaiconurl = esc_url( $GLOBALS["stdata131"] );
}else{
$kaiwaiconurl = get_template_directory_uri().'/images/no-img.png';
}
if ( trim( $GLOBALS["stdata134"] ) !== '' ) {
$kaiwaiconname = esc_html( $GLOBALS["stdata134"] );
}else{
$kaiwaiconname = '';
}
return '<div class="st-kaiwa-box kaiwaicon1 clearfix"><div class="st-kaiwa-face"><img src="'.$kaiwaiconurl.'" width="60px"><div class="st-kaiwa-face-name">'.$kaiwaiconname.'</div></div>
<div class="st-kaiwa-area"><div class="st-kaiwa-hukidashi"><p>こんにちは！けろちゃん（<a href="https://twitter.com/Kero__Channel?lang=ja">@Kero__Channel</a>）です🐸</p></div></div></div>';
}
そして、変更すべき部分はreturn文です👇
fujnction.php
return '<div class="st-kaiwa-box kaiwaicon1 clearfix"><div class="st-kaiwa-face"><img src="'.$kaiwaiconurl.'" width="60px"><div class="st-kaiwa-face-name">'.$kaiwaiconname.'</div></div>
<div class="st-kaiwa-area"><div class="st-kaiwa-hukidashi"><p>こんにちは！けろちゃん（<a href="https://twitter.com/Kero__Channel?lang=ja">@Kero__Channel</a>）です🐸</p></div></div></div>';
}
変える部分は太文字の箇所です
メモ
kaiwaicon1：ショートコードを作りたい会話アイコン
<p></p>：段落
<a href="https://twitter.com/Kero__Channel?lang=ja">@Kero__Channel</a>：リンク＆表示する文字
けろちゃんはTwitterのリンクを会話文に入れ込みたかったのでまずは段落にしてそこに陸を埋め込む形で実装しました
内容の部分ができたら関数を呼び出すコードです
fujnction.php
add_shortcode('hello', 'helloFunc');
すでに定義されているはずのadd_shortcode関数を使用します
引数（カッコ内）の
1つ目（左側）が実際に使用するショートコード
2つ目（右側）が呼び出す関数名
となります
2つ目の引数は先ほど作成した関数名と全く同じようにしてください
コピペが確実かと思います
実際に使ってみる
ショートコードの作成ができたら実際に使ってみましょう
記事を投稿する際の手順と同じように管理画面のメニューから
投稿＞新規追加
もしくは
投稿＞投稿一覧＞（既存の記事を）編集
で書き込め画面を用意してください
そこに作成したショートコードを書き込みます
書き込む際は[]で囲むようにしてください
例えば、けろちゃんはhelloというショートコードを作ったので
と記入します
書き込んだらプレビューしてみましょう
きっとリンク付きの会話吹き出しが表示されると思います
もし万が一表示されなかった場合はどこかでミスしている可能性が高いです
誤字脱字がないかチェックしてみてください
もし何も表示されないなど不測の事態が起こったらバックアップからデータを復元してやり直しましょう
放置してしまうと思わぬところでエラーの原因になるので中途半端な状態で放置することはないようにしてください
まとめ
今回はAFFINGER5の会話吹き出しにTwitterのリンクを追加してショートコードで使えるようにする方法を説明しました
毎回打つ手間を省くのであいさつ文のような定型文はショートコードを作成すると圧倒的に楽になります
他のショートコード作成にも活用できると思うのでいろいろと試してみるのも面白いと思います
けろちゃんねるでも使用しているAFFINGER5はこちら👇のリンクより購入できますので興味が湧いた方はのぞいてみてくださいね
