ショートコード作成、囲み枠の作り方【wordpress】

ショートコード作成、囲み枠の作り方【wordpress】

こんにちは!

dyna(@dyna)です。

今回の記事は、Wordpressのショートコードを自作して、囲み枠(装飾)の作り方です!

こちらを参考にさせていただきました!

https://www.webdesignleaves.com/pr/wp/wp_shortcode.html

https://ottan.xyz/posts/2016/04/wordpress-shortcode-getting-start-6855/

https://webdesignday.jp/inspiration/wordpress/4641/

こんな方にお勧め!
  • PHP、Wordpressを学習中
  • 既存のショートコードプラグインでは物足りない
  • とりあえずやってみたい

 

今回は、functions.phpとstyle.cssをさわるので、必ずバックアップと、子テーマ(※親テーマからコピーしたもの)を使用することをお勧めします。

functions.phpは間違った記載をすると、
最悪、表示されないなんてこともあるので・・・(-_-;)
バックアップを取ってすぐ戻せるようにしておくことは大事です!

 

  • 加工前に必ずバックアップを取っておくこと
  • 子テーマに書き込むこと

 


 


 デモ 

無難な感じのくくり枠

テスト

無難なくくり枠2

ここにテキストが入るよ

 

テープ風

市松模様の色は自分で変更できるよ

 

派手なグラデーション

派手だね!!

 

マウスを載せるとヌルっと動くよ(ちょっと遊んでみた)

ここが囲まれたコンテンツ

 

作り方

やり方は、

1:functions.phpにコードを記入して、ショートコードを使えるように設定。

2:CSSで装飾をつける。

です!

まず、無難な感じのくくり枠を作ってみるよ。

 

functions.php↓

まずは、上記のコードを、コピーした子テーマのfunctions.phpの最後に貼り付けます。

 

style.css↓

 上記のコードを、子テーマのstyle.cssの最後にコピーして貼り付けます。

  

表示させるために、ワードプレスの記事画面で、下記のショートコードを入力します↓

表示できました!

ここにテキスト入力してね!

解説

function box_func(~ からは、下記のような書き方で記載しています。

 

コールバック関数とは

PHPの関数には、引数が設定できます。※()の中身

コールバック関数は、引数にコールバック関数名を設定することで、呼び出しができます。

 

つまり、「1つ関数を作り(コールバック関数)、それを別の関数の引数に設定して呼び出す」という形になります。


次にこちらの$atts,$content、returnについて。

function box_func( $atts, $content = null ) {

    return ‘<div class=”costm-box”>’ . $content . ‘</div>’;

}

$atts:ショートコードのパラメーターを格納する配列 $content:ショートコードに囲まれた本文

return で、HTMLの<div class =”○○”>で $content をくくって表示させるようにしているものを返しています。

このclassにCSSで装飾をつけていく形です。

 

※returnの記事はこちらにもありますのでご参考までに。

 

add_shortcode(‘costm-box’, ‘box_func’);

この記載でショートコードを登録します。 ※add_shortcode(‘ショートコード名’, ‘コールバック関数名’);

 

あとは、style.cssに装飾を施し、ショートコードを呼び出します。※コードは上記を参考ください。

 

classを変えるだけで使いまわせるようにする

上記のコードだと、毎回functions.phpにclassを追加して書く形になります。

 

毎回書くのやだし、コード増ちゃうのね。

ということで、下記コードで使いまわせるようにしたいと思います。

functions.phpの最後に追加↓

 

style.cssの最後に追加↓(市松模様で作ってます)

 

呼び出すときはこちら↓(WPの記事画面でショートコード記入)

 

市松模様の色は自分で変更できるよ

 


さっきと作り方で違うのは、functions.phpのコード、ワードプレスの記事での呼び出し方の違いです。

 

 

shortcode_attsに関しては以下の説明が分かりやすかったです↓

]ユーザーがショートコードに指定した属性を、予め定義した属性と結合し、必要に応じてデフォルト値をセットします。結果は配列で、キーが予め定義された属性、値が指定された属性値を結合したものになります。

 

多くの場合、連想配列を個別の変数に変換するextract関数と組み合わせて、ショートコードに対応したテキストを生成する関数の冒頭で使用する。

引用元:WordPress 私的マニュアル

 

次にextract()。

 extract()を使うと連想配列を変数に登録(抽出)してくれるので、キーの名前を変数名として利用できます

上記でいうと、配列のキー「class」が変数名「$class」になります。

$classはショートコードを入力したclassの値になります。

 

functions.phpはさっきの行だけで、CSSだけを追加していけば
自分で作ったクラス (class =”tape”など)を使えるってことね! 

WordPressでショートコードの呼び出しは以下のように書きます。

このクラスに、CSS装飾をつけると好きなボックスで表示できます。

デモのCSS

デモのCSSの装飾も参考までに。

funcsion.php↓ ※下記コードをコピーして、子テーマのfunctions.phpの最後に張ってね。

 

style.css↓ ※下記コードをコピーして、子テーマのstyle.cssの最後に張ってね。

グラデーション↓

 

使う用途あるかな?

ホバー(動く)バー↓

 

ここが囲まれたコンテンツ

こんな感じです!!

参考サイト様、ありがとうございます。

ちなみに、ショートコードはプラグイン、「Shortcodes Ultimate 」がおすすめです!(愛用してます)

 

ここまで読んで下さりありがとうございます。

修正等ありましたら、お問い合わせよりお願い致します。

 

参加中(`・ω・´)

このエントリーをはてなブックマークに追加 ブログランキング・にほんブログ村へ
FC2ranking