AFFINGER5

【AFFINGER5】会話ふきだしをショートコードで使えるようにする

2021-01-04

けろちゃん

こんにちは!けろちゃん(@Kero__Channel)です🐸

今回は冒頭のあいさつで使用している会話ふきだしをショートコードで使えるようにする方法を紹介します

AFFINGER5のカスタム例となりますので他のテーマをご利用の方の参考にはならないと思います。ご了承ください

WordPressテーマ 「WING(AFFINGER5)」

いったい何のことかという方のために説明すると

これ👇のことです

これ、毎回打っても良いのですが、Twitterへのリンクも載せているので毎回打つ手間を省きたいなと思いショートコードを作りました

事前準備

まずはバックアップを取りましょう

いきなり変更して何らかの理由で上手く動作しなかったとき、今までのブログに関する設定がパーになったりブログ自体が表示できないなんてことにもなりかねません

時間を無駄にすることになったり、ページが表示されなくなったりするかもしれなくなってもけろちゃんは責任を負えないので絶対にバックアップしておいた方が良いです

というのも、けろちゃんは一度画面が真っ白になる経験をしたので声を大にして言います

けろちゃん
メンタルのためにも絶対にバックアップしてください

バックアップしないとこう👇なっちゃいますよ😱😱😱

テーマエディターを編集する

バックアップが取れたらいよいよ変更を加えていきます

まずは管理画面のメニューから

外観>テーマエディター

を選びます

menu

右上の方に

編集するテーマを選択

というのがあると思うので、ここを

WING-AFFINGER5 Child

にします(デフォルトでなってると思います)

必ずWING-AFFINGER5 Childを編集するようにしてください

変更したら、その下のテーマファイルから

テーマのための関数(function.php)

を選択してください

ずら~っとコードが書いてありますが、1番下まで移動してオリジナルのショートコードを追記していきます

ショートコードを追加する

では実際にショートコードを追加していきましょう

会話文のショートコードの追加では大きく分けて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はこちら👇のリンクより購入できますので興味が湧いた方はのぞいてみてくださいね

WordPressテーマ 「WING(AFFINGER5)」



ブログランキングに参加中です!
下記リンククリックにて応援お願いします🐸

ブログランキング・にほんブログ村へ
  • この記事を書いた人

けろちゃん

エンジニアの知識とスキル、塾講師の経験からITを分かりやすく解説しながら、IT化の進むこの時代を駆け抜けるデジタルネイティブ世代のスーパーポジティブ代表。エンジニアだって心身ともに健康でありたい!という想いから、考え方やライフスタイルも発信。

-AFFINGER5
-, , ,