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

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

thumbnail ワードプレス wp-note

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

 

ひな型のショートコード

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

functions.php
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など)や文字列を設定して使用します。" ]

こんな感じになります。

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

 

エラーメッセージ

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

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

 

midashi=””

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

[ borderbox color="" midashi="" text=”” ]
カラーはCSSで一応設定しているので空のままでも動作しますが、midashi=""が空のままだとこのようにタイトル欄のレイアウトが崩れます。

 

midashi=””を削除

見出しmidashiの既定値を"見出し"と設定しているのでmidashi=""の部分を削除すると「見出し」がタイトルになります。
[ borderbox color="" text=”” ]

 

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

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

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

ダブルクォーテーションを使用したいテキスト内で"ダブルクォーテーション"を使用したい場合は、text=をシングルクォーテーションで囲み、シングルクォーテーションを使用したい場合は、ダブルクォーテーションで囲みます。

 

CSS

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

 


コメントはお気軽にどうぞ

メールアドレスは公開されません。

尚、スパムコメント対策として海外のIPアドレスからのコメントは受け付けないようにしています。そのような場合にはお問い合わせフォームよりご連絡下さい。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。
* が付いている欄は必須項目です。