ご相談・お問い合わせ
サイトエンジン株式会社
平日 9:00-18:00

WordPressのショートコードとカスタマイズ

2021.08.23
この記事の著者
Westom
Westom
記事一覧

こんにちは、サイト管理やサーバーの運用業務を担当するエンジニアのWestomです。

前回は、ループをカスタマイズする方法を解説して、WordPressでホームページの上部にスライドショーを作成する方法も紹介しました。

今回はさらにショートコード(shortcode)を利用して、既存のプラグインやテンプレートの機能を拡張できるようにします。

ショートコードの基本構文

ショートコードは通常、WordPressブロックエディターで [ショートコード] または [ショートコード パラメーター1 = 値1 パラメーター2 = 値2] の形で利用されます。アクセス解析などの機能があるプラグイン Jetpack をインストールする場合は、 [portfolio] を利用してポートフォリオ、または [testimonial] を利用してユーザーの証言などを表示することもできます。

Jetpackに加えて、Elementor や高度な検索プラグイン Ivory Search などをインストールするとショートコードが作成されます。そのショートコードを投稿ページに入れると対応するコンテンツが自動的に作成されます。

ショートコードの基本的な構文は次のとおりです。

add_shortcode( 'myshortcode', 'eric_the_shortcode' );
function eric_the_shortcode( $atts ) {
   $a = shortcode_atts( array(
           '引数 1'   =>  '値',
           '引数 2'   =>  '値',
       ),
   $atts );
   /* レスポンスする値を定義します */
   $output = '';
 
   /* $a を利用して文字列を結合します */
   $output .= '<a href="' . $a['引数 1'] . '">';
   $output .= $a['引数 2'] . '</a>';
 
   /* 結合された文字列をレスポンスします */
   return $output;
}

そして、 [myshortcode] を使うと、ページに <a href=”引数 1″>引数 2<a/> というリンクの要素が表示されます。

ショートコードを利用してページにカスタムカルーセルを入れる

前回のサンプルコードを使うと、ページまたはウィジェットにスライドショーカルーセルを入れられます。カスタムコンテンツタイプとカスタムフィールドの設定についても、前回の設定をそのまま利用できますが、header.phpにループを入れる必要はありません。

/**
* スライドショーカルーセルのショートコードを定義します。
*
* @param string $atts ショートコードから返された引数。
*/
function custom_slider( $atts ) {
   $a = shortcode_atts( array(
       'slides'     => 3, // スライドの数を表示する
       'exclude'    => '', // 除外するスライドのID、コンマで区切ります
       'include'    => '', // 含まれているスライドのID、コンマで区切ります
       'size'       => 'full', // スライドで使われている写真のサイズ
       ),
   $atts );
 
   /* ショートコードの引数をカスタムループの引数に変換します */
   $args = array(
       'post_type'         => 'slide',
       'posts_per_page'    => $a['slides'],
       'post__in'          => explode( ',', $a['include'] ),
       'post__not_in'      => explode( ',', $a['exclude'] ),
   );
  
   $slides = new WP_Query( $args );
  
   $output = '';
  
   if ( $slides -> have_posts() ) {
       $output .= '<div class="slick-slider" id="custom-slider">';
       while ( $slides -> have_posts() ) {
           $slides -> the_post();
           $output .= '<div id="slide-' . get_the_ID() . '">';
           $output .= '<a href="' . get_field( 'url' ) . '" target="_self">';
           $output .= get_the_post_thumbnail( get_the_ID(), $a['size'] );
           $output .= '</a>';
           $output .= '</div>';
       }
       $output .= '</div>';
   }
   wp_reset_postdata();
   return $output;
}
add_shortcode( 'slider', 'custom_slider' );

そして、ブロックエディタでショートコードブロックを追加するか、ショートコード [slider] を記事に直接入れるだけで、上記のHTML要素が好きな場所に表示されます。 さらに、 [slider slides=4] の形でスライドの数をカスタマイズすることもできます。

他のプラグインのショートコードを拡張する

プラグイン Content Blocks を例として、元のショートコードを利用してページのオブジェクトをモジュール化して管理する方法を紹介します。

プラグイン「Content Blocks」が最初に受け入れたパラメータは次のとおりです。

/* post-widget.php Line 172 */
shortcode_atts( array(
   'id' => '',
   'slug' => '',
   'class' => 'content_block',
   'suppress_content_filters' => 'no',
   'featured_image' => 'no',
   'featured_image_size' => 'medium',
   'title' => 'no',
   'title_tag' => 'h3',
   'markup' => 'div'
), $atts ) );

今回は、ページスクロールアニメーション(animation on scroll)の機能と組み合わせたいので、 [data-aos] 属性を追加することが必要です。まずはプラグイン「Content Blocks」のソースコードをコピーして、テンプレートの functions.php または Code Snippets を編集して次のように調整します。

/**
* content_block ショートコードを拡張します。
* WordPressのPHPコーディング標準に従って、元の抽出方法を変更します。
*/
add_shortcode( 'content_block_ext', 'custom_post_widget_shortcode' );
function custom_post_widget_shortcode( $atts ) {
   $a = shortcode_atts( array(
       'id' => '',
       'slug' => '',
       'class' => 'content_block',
       'suppress_content_filters' => 'no',
       'featured_image' => 'no',
       'featured_image_size' => 'medium',
       'title' => 'no',
       'title_tag' => 'h3',
       'markup' => 'div',
       'aos'    => '',
   ), $atts );
 
   if ( $a['slug'] ) {
       $block = get_page_by_path( $a['slug'], OBJECT, 'content_block' );
       if ( $block ) {
           $a['id'] = $block->ID;
       }
   }
 
   $content = '';
 
   if( $a['id'] != '' ) {
       $args = array(
           'post__in' => array( $a['id'] ),
           'post_type' => 'content_block',
       );
 
       $content_post = get_posts( $args );
 
       foreach( $content_post as $post ) {
           /* ここから、data-aos のデータ属性を最も外側の要素に追加します。 */
           $aos_attr = ''
           if ( $a['aos'] !== '' ) {
               $aos_attr = ' data-aos="' . $a['aos'] . '"';
           }
           $content .= '<' . esc_attr( $a['markup'] ) . ' class="'. esc_attr( $a['class'] ) .'" id="custom_post_widget-' . $a['id'] . '"' . $aos_attr . '>';
           /* ここまでは主な変更部分です。 */
           if ( $a['title'] === 'yes' ) {
               $content .= '<' . esc_attr( $a['title_tag'] ) . '>' . $post -> post_title . '</' . esc_attr( $a['title_tag'] ) . '>';
           }
           if ( $a['featured_image'] === 'yes' ) {
               $content .= get_the_post_thumbnail( $post -> ID, $a['featured_image_size'] );
           }
           if ( $a['suppress_content_filters'] === 'no' ) {
               $content .= apply_filters( 'the_content', $post -> post_content );
           } else {
               $content .= $post -> post_content;
           }
           $content .= '</' .  esc_attr( $a['markup'] ) . '>';
       }
   }
 
   return $content;
}

そして、管理画面で表示されるプラグイン「Content Blocks」のショートコードをコピーして、 [content_block …] から  [content_block_ext …]  に変更することができました。

おわりに

ショートコードを利用すれば、WordPressのカスタマイズの柔軟性を大幅に向上させることができます。 今回は、パッケージ化するショートコードを作成する例と、プラグインのショートコードを活用する方法の、2つの例を紹介しました。 

次回は、今まで取り上げてきた様々なツールを組み合わせることで、問い合わせフォーム「Contact Form 7」の機能を拡張します。

著者プロフィール
Westom
Westom

サイト管理やサーバーの運用業務を担当するエンジニアのWestomです。これからは役に立つなツールやプログラミングなどの技術情報を紹介しますので、どうぞよろしくお願いします!

page top