ショートコード作成、囲み枠の作り方【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. 作り方
- 1.1. classを変えるだけで使いまわせるようにする
2. デモのCSS

作り方

やり方は、

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

2：CSSで装飾をつける。

です！

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

functions.php↓


//ボックスを装飾（囲み型ショートコード）
function box_func( $atts, $content = null ) {
    return '<div class="costm-box">' . $content . '</div>';
}
add_shortcode('costm-box', 'box_func');

//ボックスを装飾（囲み型ショートコード）

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

return '<div class="costm-box">' . $content . '</div>';

}

add_shortcode('costm-box', 'box_func');

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

style.css↓


.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;
}

.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の最後にコピーして貼り付けます。

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


[costm-box]ここにテキスト入力してね！[/costm-box]

[costm-box]ここにテキスト入力してね！[/costm-box]

表示できました！

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

解説

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


function コールバック関数(引数) {
  /* ショートコードの動作 returnで値を返す */
  return $value; 
}
add_shortcode('ショートコード名', 'コールバック関数名');

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：ショートコードに囲まれた本文
引用元：OTTANXYZ WordPressのショートコード入門

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

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

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

javascriptのreturnとは

javascriptのreturnの使い方について、学んだことを簡単に記録しています。返り値、処理の終了として使用できます。

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

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

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

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

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

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

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

functions.phpの最後に追加↓


//クラス名として出力
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');

//クラス名として出力

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の最後に追加↓（市松模様で作ってます）


.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; &nbsp;/* マステ部分文字色 */
	text-align: center;
	position: absolute;
	top: -10px;
	left: 20px;
	transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
}

.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の記事画面でショートコード記入）


[create class="tape"]市松模様の色は自分で変更できるよ[/create]

[create class="tape"]市松模様の色は自分で変更できるよ[/create]

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

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


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');

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に関しては以下の説明が分かりやすかったです↓

]ユーザーがショートコードに指定した属性を、予め定義した属性と結合し、必要に応じてデフォルト値をセットします。結果は配列で、キーが予め定義された属性、値が指定された属性値を結合したものになります。
引用元：WordPress　codex　関数リファレンス/shortcode atts

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

次にextract()。

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

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

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

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

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


[create class="tape"]市松模様の色は自分で変更できるよ[/create]

[ショートコード名　class ="任意のクラス名"] 表示したいテキスト　[/ショートコード名]

[create class="tape"]市松模様の色は自分で変更できるよ[/create]

[ショートコード名　class ="任意のクラス名"] 表示したいテキスト　[/ショートコード名]

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

デモのCSS

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

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


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');

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の最後に張ってね。

グラデーション↓


.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);
  }
}

.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);

}


[create class="gra"]使う用途あるかな？[/create]

[create class="gra"]使う用途あるかな？[/create]

使う用途あるかな？

ホバー（動く）バー↓


.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;
}

.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;

}


[create class="black"]ここが囲まれたコンテンツ[/create]

[create class="black"]ここが囲まれたコンテンツ[/create]

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

こんな感じです！！

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

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

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

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