ショートコード作成、囲み枠の作り方【wordpress】
- 2021.04.02
- 01_技術ブログ 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↓
1 2 3 4 5 6 7 | //ボックスを装飾(囲み型ショートコード) function box_func( $atts, $content = null ) { return '<div class="costm-box">' . $content . '</div>'; } add_shortcode('costm-box', 'box_func'); |
まずは、上記のコードを、コピーした子テーマのfunctions.phpの最後に貼り付けます。
style.css↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | .costm-box{ background: none; border: 1px solid #f3cbd0; /* 線の太さ・種類・色 */ margin: 15px 10px; /* 外側の余白 上下・左右 */ padding: 20px; /* 内側の余白 */ position: relative; z-index: 1; } .costm-box:before{ background-color: #fff; content: 'Tips'; padding: 2px 10px; /* タイトルの余白 上下・左右 */ position: absolute; top: -10px; left: 30px; text-align: center; z-index: 1; } .costm-box:after{ background: none; border: 1px solid #f3cbd0; /* 線の太さ・種類・色 */ content: ''; position: absolute; top: 3px; left: 3px; width: 100%; height: 100%; z-index: 0; } |
上記のコードを、子テーマのstyle.cssの最後にコピーして貼り付けます。
表示させるために、ワードプレスの記事画面で、下記のショートコードを入力します↓
1 2 3 | [costm-box]ここにテキスト入力してね![/costm-box] |
表示できました!
解説
function box_func(~ からは、下記のような書き方で記載しています。
1 2 3 4 5 6 7 | function コールバック関数(引数) { /* ショートコードの動作 returnで値を返す */ return $value; } add_shortcode('ショートコード名', 'コールバック関数名'); |
コールバック関数とは
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(‘ショートコード名’, ‘コールバック関数名’);
あとは、style.cssに装飾を施し、ショートコードを呼び出します。※コードは上記を参考ください。
classを変えるだけで使いまわせるようにする
上記のコードだと、毎回functions.phpにclassを追加して書く形になります。
毎回書くのやだし、コード増ちゃうのね。
ということで、下記コードで使いまわせるようにしたいと思います。
functions.phpの最後に追加↓
1 2 3 4 5 6 7 8 9 10 | //クラス名として出力 function box_create ($atts, $content = null ) { extract( shortcode_atts( array( 'class' => 'no-class', ), $atts ) ); return '<div class="' . esc_attr($class) . '">' . $content . '</div>'; } add_shortcode('create', 'box_create'); |
style.cssの最後に追加↓(市松模様で作ってます)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | .tape{ background-color: #fff; /* 背景色 */ border: 1px solid #ccc; box-shadow:1px 1px 6px 0px #ccc; -moz-box-shadow:1px 1px 6px 0px #ccc; -webkit-box-shadow:1px 1px 6px 0px #ccc; -o-box-shadow:1px 1px 6px 0px #ccc; margin: 20px 5px; /* 外側の余白 上下・左右 */ padding: 30px 20px 20px 20px; /* 内側の余白 上・右・下・左 */ position: relative; z-index: 0; } .tape:after{ background-color: #ffe2e2; /* マステ部分の色1 */ background-image: linear-gradient(45deg, #ffffd2 25%, transparent 25%, transparent 75%, #ffffd2 75%, #ffffd2), linear-gradient(45deg, #ffffd2 25%, transparent 25%, transparent 75%, #ffffd2 75%, #ffffd2); /* マステ部分の色2 */ background-position: 0 0, 12px 12px; background-size: 24px 24px; border-left: 2px dotted rgba(255,255,255,0.9); border-right: 2px dotted rgba(255,255,255,0.9); box-shadow: 0 0 5px rgba(255,255,255,0.5); content: 'おすすめ!';/* タイトル文字 */ display: block; margin: 0 0 10px 0; padding: 5px 20px; color: #364f6b; /* マステ部分文字色 */ text-align: center; position: absolute; top: -10px; left: 20px; transform: rotate(-3deg); -moz-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); -o-transform: rotate(-3deg); } |
呼び出すときはこちら↓(WPの記事画面でショートコード記入)
1 2 3 | [create class="tape"]市松模様の色は自分で変更できるよ[/create] |
さっきと作り方で違うのは、functions.phpのコード、ワードプレスの記事での呼び出し方の違いです。
1 2 3 4 5 6 7 8 9 | function box_create ($atts, $content = null ) { extract( shortcode_atts( array( 'class' => 'no-class', ), $atts ) ); return '<div class="' . esc_attr($class) . '">' . $content . '</div>'; } add_shortcode('create', 'box_create'); |
shortcode_attsに関しては以下の説明が分かりやすかったです↓
]ユーザーがショートコードに指定した属性を、予め定義した属性と結合し、必要に応じてデフォルト値をセットします。結果は配列で、キーが予め定義された属性、値が指定された属性値を結合したものになります。
多くの場合、連想配列を個別の変数に変換するextract関数と組み合わせて、ショートコードに対応したテキストを生成する関数の冒頭で使用する。
引用元:WordPress 私的マニュアル
次にextract()。
extract()を使うと連想配列を変数に登録(抽出)してくれるので、キーの名前を変数名として利用できます。
上記でいうと、配列のキー「class」が変数名「$class」になります。
$classはショートコードを入力したclassの値になります。
functions.phpはさっきの行だけで、CSSだけを追加していけば
自分で作ったクラス (class =”tape”など)を使えるってことね!
WordPressでショートコードの呼び出しは以下のように書きます。
1 2 3 4 5 | [create class="tape"]市松模様の色は自分で変更できるよ[/create] [ショートコード名 class ="任意のクラス名"] 表示したいテキスト [/ショートコード名] |
このクラスに、CSS装飾をつけると好きなボックスで表示できます。
デモのCSS
デモのCSSの装飾も参考までに。
funcsion.php↓ ※下記コードをコピーして、子テーマのfunctions.phpの最後に張ってね。
1 2 3 4 5 6 7 8 9 | function box_create ($atts, $content = null ) { extract( shortcode_atts( array( 'class' => 'no-class', ), $atts ) ); return '<div class="' . esc_attr($class) . '">' . $content . '</div>'; } add_shortcode('create', 'box_create'); |
style.css↓ ※下記コードをコピーして、子テーマのstyle.cssの最後に張ってね。
グラデーション↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .gra{ padding: 20px; background: linear-gradient(to right, #2af598 0%, #009efd 100%); opacity: 0.8; animation: huerotator 3s infinite alternate; } @keyframes huerotator { 0% { -webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg); } 100% { -webkit-filter: hue-rotate(360deg); filter: hue-rotate(360deg); } } |
1 2 3 | [create class="gra"]使う用途あるかな?[/create] |
ホバー(動く)バー↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | .black { padding: 10px; margin:10px; width:90%; border-radius: 0; color:#000; position: relative; z-index: 2; } .black:after { position: absolute; width: 10px; height:50px; padding: 10px; content: ''; -webkit-transition: all 1s; transition: all 1s; background:rgb(211, 250, 247); z-index: 0; } .black:after { left: -10px; bottom: 0; z-index: 0; } .black:hover{ color:#000; z-index: 2; } .black:hover:after { width: 100%; z-index: -1; } |
1 2 3 | [create class="black"]ここが囲まれたコンテンツ[/create] |
こんな感じです!!
参考サイト様、ありがとうございます。
ちなみに、ショートコードはプラグイン、「Shortcodes Ultimate 」がおすすめです!(愛用してます)
ここまで読んで下さりありがとうございます。
修正等ありましたら、お問い合わせよりお願い致します。
