2021.05.29

【WP】ひな型ショートコード

ワードプレスのテーマをカスタムする際に筆者がよく利用するショートコードの使い方のメモです。

 

ひな型のショートコード

下記コードがよく利用するショートコードひな型です。

function border_box($atts) {
  extract(shortcode_atts(array( // 連想配列
    'midashi'     => '見出し',  // 値を設定してショートコードにmidashi=""と記載すると何も表示されなくなる
    'text'        => '',        // 空の場合は何も表示されない
    'color'       => '',   
    ), $atts));
  $output = '';
  if($text){ 	// $textにデータが入っている場所の処理
    $output = sprintf(
      '<div class="border-box" style="background-color:%s"><div class="border-box_heading" style="border: 3px %s solid">%s</div>%s</div>',
     $color,      // 上記htmlの1番目に出てくる %s に指定する値
     $color,      // 上記htmlの2番目に出てくる %s に指定する値
     $midashi,    // 上記htmlの3番目に出てくる %s に指定する値
     $text  	  // 上記htmlの4番目に出てくる %s に指定する値
    );
  }else{         // $textにデータが入っていない場合はメッセージを表示
    $output = '<span style="color:red;">テキストが記載されていません。</span>'; // テキストを入力していないと表示されるメッセージ
  }
  return $output;
}
add_shortcode('borderbox', 'border_box');

 

 

使用例

上記コードだと下記のようなショートコードにカラーコード(#fff、redなど)や文字列を設定して使用します。

[ borderbox color="" midashi="" text="" ]

尚、ショートコードはpreタグやcodeタグで囲っても動作するので表記できるようにカッコの前後に半角スペースを入れていいます。実際に使用する際は半角スペースを取り除いて利用して下さい。

下記のように記載すると…。

[ borderbox color="" midashi="使用例" text="上記コードだと下記のようなショートコードにカラーコード(#fff、redなど)や文字列を設定して使用します。" ]

こんな感じになります。

 

エラーメッセージ

textの項目になにも入力していないと下記のようなエラーメッセージが表示されます。

text=""

テキストが記載されていません。

 

midashi=””

midashi(見出し)は空のままだとタイトル欄のレイアウトが崩れます。

[ borderbox color="" midashi="" text=”” ]

 

midashi=””を削除

[ borderbox color="" text=”” ]

 

文字列にダブルクォーテーションを使用する

color=””などのダブルクォーテーションは実はシングルクォーテーションでもいいですし、無くても使用可能なんです。

ただ、テキスト内でダブルクォーテーション(“)を使用したい場合は、text=をシングルクォーテーションで囲み、シングルクォーテーションを使用したい場合は、ダブルクォーテーションで囲んで入れ子状態にします。"はそのまま表示されるので同時に使いたい場合は分かりません。

 

CSS

CSSはこんな感じです。

.border-box1 {
	padding: 2.5em 1.5em 1.5em 1.5em;
	background-color: #beeeff;
	position: relative ;
	display: inline-block;
	margin: 1.5em 0 1em 0;
	border-radius: 8px;
}
.border-box1_heading {
	position: absolute;
	top: -14px;
	left: 17px;
	padding: 2px 12px 0px 12px;
	display: inline-block;
	border-radius: 8px;
	font-weight: bold;
	background-color: #f9f9f9;
	box-shadow: 2px 2px 0px 0px;
}