Home
PHP
WordPressでショートコードを自作する方法

WordPressでショートコードを自作する方法

公開日
2021.07.02
更新日
2022.04.02
WordPressでショートコードを自作する方法

どうも!かけちまるです!

固定ページで記事情報を取得したいからWordpressのエディターにPHPを書いて投稿を取得しようと思ったらうまく動かない。
そうです、WordPressのエディターにPHPを書いても動かないのです。

なのでこうしましょう!
functions.phpで記事情報を取得するショートコードを自作します。
functions.phpで自作したショートコードをWordpressのエディターに記述して記事情報を表示できるようにすれば解決です。

ということでこの記事では、

  • ・ショートコードとは?
  • ・ショートコードを自作する方法
  • ・記事情報を取得するショートコードを自作する方法

以上の3つを学べます。

ショートコードとは?

[shortcode post_id=“221” title=“かけちまる”]こんな感じのコードを見たことありますかね?

ショートコードとは、functions.phpにあらかじめ処理を書いておきます。
例えば、記事情報を最新5件取得するみたいな。

その処理を
[shortcode post_id=“221” title=“かけちまる”]
こんな感じのコードを記述することで呼び出すことができるのです。

ここまでの説明は、ショートコードを自作した時の説明です。

プラグインも色々あるみたいなので自作する気のない人は試してみるといいかもです。

ショートコードを自作する方法

ここから具体的にショートコードを自作する方法を解説します。
ここで紹介するコードは、雛形的なものなのでこの雛形を活用して好きな処理を実装してみてください。

編集するファイルは、
/wp-content/themes/テーマ名/functions.php
を編集していきます。

!注意!
  • ・functions.phpのバックアップを必ずとること
PHP
コピー
// sampleという名前の関数を定義 function sample() { // sample関数が呼び出されたら「ショートコード表示成功!」を返す return 'ショートコード表示成功!'; } // [sample_shortcode]の記述があるところにsample関数の処理結果を返す add_shortcode('sample_shortcode', 'sample');

上記のコードをfunctions.phpの最後にコピペすれば良いでしょう。
基本的なショートコードの自作はこれだけで完了です。

それで以下のショートコードを投稿記事や固定ページに記述してみてください。
ページを更新してみて、記述した箇所に「ショートコード表示成功!」と表示されれば成功です。
[sample_shortcode]

最新5件の記事情報を取得するショートコードを自作する方法

ここでは実用的なショートコードを自作する方法を解説します。

やっている処理を簡単に説明すると、

  • ・最新5件の記事情報を取得する
  • ・while文で取得した記事情報を1件ずつまわす
  • ・$five_posts変数にhtmlタグを代入していく
  • ・returnで$five_posts変数の値を返す

というふうなことをしています。

投稿記事や固定ページに以下のショートコードを記述することでその場所に最新5件の記事が表示できます。
[get_five_post_shortcode]

CSSは好きなように設定してください。
$five_posts変数に代入するHTMLをアレンジすることで記事情報の表示表現を変えることができます。

PHP
コピー
function get_five_post() { $wp_query = new WP_Query(); $my_posts = array( 'post_type' => 'post', 'posts_per_page'=> '5', ); $wp_query->query($my_posts); if( $wp_query->have_posts() ){ while( $wp_query->have_posts() ){ $wp_query->the_post(); $five_posts .= '<a class="five_posts_link" href="' . get_the_permalink() . '">'. get_the_date() .' '. get_the_title() . '</a>'; } } wp_reset_postdata(); return $five_posts; } add_shortcode('get_five_post_shortcode', 'get_five_post');

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【Contact Form 7】自動で挿入されるpタグやbrタグを削除する方法

【Contact Form 7】自動で挿入されるpタグやbrタグを削除する方法

bxSliderのデザインカスタムと不具合の対処

bxSliderのデザインカスタムと不具合の対処

【SVG】vivus.jsで手書き風テキストアニメーションを実装

【SVG】vivus.jsで手書き風テキストアニメーションを実装

【GSAP】registerEffectでアニメーションをテンプレート化する方法

【GSAP】registerEffectでアニメーションをテンプレート化する方法

jQueryでスクロール中か否かを判定する方法

jQueryでスクロール中か否かを判定する方法

【GSAP】擬似要素(before・after)をアニメーションさせる方法

【GSAP】擬似要素(before・after)をアニメーションさせる方法