たった4行でOK!最も簡単にWordPressでショートコードを作成する方法

WordPress

みなさん,こんにちは.
シンノユウキ(@y_stadio)です.

今回はWordPressでショートコードを作成する方法を紹介します.同じテキストを何度も書く必要がある….そんな場合に重宝する機能です.

では行きましょう!

ショートコードの何が便利?

ショートコードを使用することで,繰り返し書くテキストなどを少しの文字量で記述することができるようになります.いわばテキストの関数化.じつは私が使用しているWordPressのテーマ:Cocoonには,デフォルトでそれを作成する機能があります.

しかし,これはあくまで静的なテキストを生成するもので,たとえば

  • 自分の年齢
  • 記事の一覧

など,時間がたった後に更新されるものは作成できません.その場合,やはり自分で実装する必要があります.そのような場合に重宝するのがショートコードです.今回は静的なテキストの生成から始めますが,いずれは動的なテキストも作成できるようにしていきたいと思います.

では,以下から実際に作っていきましょう!

まずはバックアップをとる

まずは,編集するファイルのバックアップをとっておきましょう.WordPressのファイルを直接編集した場合,ちょっとしたエラーで画面が真っ白になってしまい,一切の処理ができなくなるということが発生します.なので,そういったことを避けるために,バックアップをとっておきましょう.

FTPソフトなどを使用し,ローカル環境にでもファイルをバックアップしておいてください.テーマの中にあるfunctions.phpファイルを編集しますので,そちらのバックアップをとっておいてください.

たった4行でOK!

では,functions.phpにコードを追加していきます.

functions.phpはテーマの中に格納されています.

「テーマの編集」をクリックし,「テーマのための関数」をクリックしてください.

そうすると,functions.phpが開きます.

そのファイルの一番下に以下のコードを挿入して下さい:

これだけでOKです!ファイルを更新すればもう使う事ができます!

一応,コードの解説をしておきましょう.1~3行目では,ショートコードを記述した場所で実行される関数を記述しています.ただ "Hello, World!" とリターンするだけの簡単なものです.

4行目で  add_shortcode( 'hello', 'hello_func' )  と書きました.これは以下のような構造を持っています:

add_shortcode( ショートコード名, 関数名 )

つまり,'hello'がショートコードの名前で,'hello_func'がショートコードで実行される関数の名前です.このショートコード名を記事本文などに挿入することで,指定した関数が実行されます.

ショートコードを使ってみよう!

では,実際にショートコードを使ってみましょう.

ショートコードは,角括弧[ ] の中に記述します.先ほどのショートコードだと, [hello] と書けば良いです.

試しに,記事の本文中にを書いてみましょう.以下が書いてみた結果です:

Hello, World!

どうですか,「Hello, World!」と出力されてますよね.

これで,ショートコードを使う事ができました!

まとめ

今回はたった4行で実装できるWordPressのショートコードについて紹介しました.かなり簡単に実装できますよね.

次回はもう少しコードの分量を増やし,もう少し実用的なものを実装してみたいと思います.

連載目次

  1. たった4行でOK!最も簡単にWordPressでショートコードを作成する方法現在のページ
  2. WordPressでショートコードを使って自分の年齢を表示してみよう!
  3. WordPressでショートコードを使って新着記事一覧を表示してみよう!
  4. WordPressでショートコードを使ってカテゴリやタグの新着記事一覧を表示させる方法
  5. WordPressでショートコードを使って連載目次を作成する方法