ブログ

自作のショートコードを使えるようにする

08/26/2020

  1. HOME >
  2. closed >
  3. ブログ >

自作のショートコードを使えるようにする

08/26/2020

ブログの運営にAFFINGER5 EXを使っている。

つい最近まではAFFINGER5 WINGだったのだが、一生懸命コードをいじってみても記事のカードデザインでの表示が上手くいかないので折れた。そんなまでして導入したのに実は上手くいっていない。まぁ、その話はまた今度にしよう。

この記事はプログラミング完全初心者のサイト管理者があれこれ調べながらサイトの改造をした内容を記録するためのもの。Wordpressテーマにアフィンガーを使っている前提なので必ずしも汎用的な内容ではない点に注意してほしい。

サイトを、というかテーマをいろいろいじっているが、その中でも断トツで利用頻度が高いのが、自作ショートコードの呼び出し。これはぜひ使えるようにしておくことをお勧めする。

ショートコードとは

アフィンガーにはデフォルトで様々なショートコードがタグという名前で用意されているので、使っている人は多いと思う。例えば書いている記事のカテゴリー一覧を表示させたいときには、

[st-catgroup cat="●●●" page="5" order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off" type=""]

というタグを選んで表示したいカテゴリーIDを指定してやれば簡単に下のようなカテゴリ内の記事の一覧表示が出来る。
ちなみにここでは上記のコード内のslide="off"を"on"にすることでスライドショーでの表示に変更している。

ブログ

2021/1/2

ショートコードをプラグインにして管理する方法

Affinger6 ActionがAffinger EX版ユーザーに対して限定先行公開された。 こちらのテーマ、これまでにAffinger5でもたびたびおこなわれていたバージョンアップとは違い、子テーマも変わる、いわばモデルチェンジ版。導入にはいろいろと問題が生じる可能性も十分に想定されたが、人柱よろしく早々に切り替えてみた。 今回はこのテーマの切り替えに合わせて行った、ショートコードのプラグイン化とfunctions.phpの軽量化についてだ。 なお、実行環境はエックスサーバーとアフィンガー6 Acti ...

ReadMore

ブログ

2020/12/28

記事を複数ページに分けるページ送りを導入する

ブログの運営にAFFINGER5 EXを使っている。 つい最近まではAFFINGER5 WINGだったのだが、一生懸命コードをいじってみても記事のカードデザインでの表示が上手くいかないので折れた。そんなまでして導入したのに実は上手くいっていない。まぁ、その話はまた今度にしよう。 この記事はプログラミング完全初心者のサイト管理者があれこれ調べながらサイトの改造をした内容を記録するためのもの。Wordpressテーマにアフィンガーを使っている前提なので必ずしも汎用的な内容ではない点に注意してほしい。 メインの ...

ReadMore

ブログ

2020/12/28

自作のショートコードを使えるようにする

ブログの運営にAFFINGER5 EXを使っている。 つい最近まではAFFINGER5 WINGだったのだが、一生懸命コードをいじってみても記事のカードデザインでの表示が上手くいかないので折れた。そんなまでして導入したのに実は上手くいっていない。まぁ、その話はまた今度にしよう。 この記事はプログラミング完全初心者のサイト管理者があれこれ調べながらサイトの改造をした内容を記録するためのもの。Wordpressテーマにアフィンガーを使っている前提なので必ずしも汎用的な内容ではない点に注意してほしい。 サイトを ...

ReadMore

ブログ

2020/8/26

AFFINGER5 | ブログ初心者がWordPressを始めるはじめ方

[myphp1 file='teikei'] 隠すまでもなく自分はプログラミングの初心者で、エンジニアの卵でさえない。そんな自分がサイトをいじっているのだからいろいろと問題はある。右も左も分からず、適当に手を付けてみては失敗しながらサイトを改造してきているので、コードを書き直す回数も半端がない。最近では、自分でやったことが後から分からなくなっている。 そんなことを項目ごとにまとめて、後から自分自身で確認しやすくしておこうと思って始めたのがこのブログだ。メインブログから見たら完全なサブコンテンツ。誰に見られ ...

ReadMore

ブログ

2020/12/28

AFFINGER5 | 記事の文章内にコードをきれいに埋め込む方法

ブログの運営にAFFINGER5 EXを使っている。 つい最近まではAFFINGER5 WINGだったのだが、一生懸命コードをいじってみても記事のカードデザインでの表示が上手くいかないので折れた。そんなまでして導入したのに実は上手くいっていない。まぁ、その話はまた今度にしよう。 この記事はプログラミング完全初心者のサイト管理者があれこれ調べながらサイトの改造をした内容を記録するためのもの。Wordpressテーマにアフィンガーを使っている前提なので必ずしも汎用的な内容ではない点に注意してほしい。 今回、こ ...

ReadMore

このように[ ]で囲んで任意のphpファイルを指定し、実行させるためのものがショートコード。これが自分の好きに使えるようになるといちいち面倒なコードを書く必要もなく、定型文やGoogle Adsenseなどを文章中に簡単に挿入できるようになる。しかも大本の参照ファイルの中身を変えれば使っているすべてのページでの表示内容を変更できるのでメンテナンスの手間も省くことが出来るようになる。

function.phpをいじってショートコードを使えるようにする

自作のショートコードを使えるようにするためにはfunction.phpに自分で作ったショートコードを呼び出すためのコードを記入しておく必要がある。やり方を説明しているサイトによってはfunction.php内に文章からすべてを記述する方法を書いているところもあるが、そうするとfunction.phpの記述がやたらと増えるうえにメンテナンスしたいときに分かりにくくなるので、個別のphpファイルを作ってそれを読み込む方法をとることにした。

これであればショートコードごとに個別のファイルを作るので、内容を変えたいときにはそのファイルだけをいじればよくなり、都度、function.phpに手を加える必要がなくなる。なんだかんだ言ってfunction.phpをいじるのは初心者にはリスクが大きいのでそのようなことは少ないに越したことはないと思う。

function.phpに記述するのは以下のコード。

function short_php($params = array()) {
  extract(shortcode_atts(array(
    'file' => 'default'
  ), $params));
  ob_start();
  include(STYLESHEETPATH . "/mycode/$file.php");
  return ob_get_clean();
}
 
add_shortcode('myphp1', 'short_php');

ちなみにこのコードは子テーマ内のfunction.phpに書き込む仕様になっているので親テーマに直接書き込むときには一部変更が必要なので注意してほしい。

このコードでは子テーマのディレクトリ、つまりaffinger-childのフォルダ内にあるmycodeというフォルダに保存されているphpファイルをショートコードを使って呼び出せるようにしている。実際にショートコードを使う時には、

[myphp1 file='ファイル名']

という一文を文章中に記述すればいい。prism.jsの時のようにエディターをテキストモードにする必要はなく、ビジュアルモードで直接書き込める。

あとこのコード自体はあくまでも別に存在しているphpファイルを呼び出しているだけなので、実際に呼び出したい内容などは別途phpファイルを作る必要がある。このコードだけで何かしらのショートコードが使えるようになるわけではない。

文章中だけに留まらないショートコードの利用

実はこのショートコード、記事以外でも便利に使うことが出来る。

例えばこのサイトで記事の最後に表示している、「この記事が気に入ったらいいね!&フォローしよう」というボックス、ショートコードを使って自動的にページに挿入されるようにしてある。もちろん各記事の最後に手入力で毎回該当するショートコードを記入してもいいのだが、それだと面倒くさいので記事のフォーマットにショートコードの呼び出しのためのコードを記述してしまうことで自動化した。

やり方は簡単で、アフィンガーで投稿記事のフォーマットを規定している、single-type1.phpやsingle-type2.phpの任意の場所にショートコード用のphpファイルのファイル名を指定してやるだけ。

具体的には、

<!-- コピー禁止エリアここまで --><!--?php get_template_part( 'like_follow_box' ); //この記事が気に入ったらいいねしよう ?-->
<!--?php get_template_part( 'sns' ); //ソーシャルボタン読み込み ?-->
<!--?php get_template_part( 'st-kai-page' ); //改ページ ?-->
<!--?php get_template_part( 'st-ad-on' ); //広告 ?-->

のように、

?php get_template_part( 'ショートコードのファイル名' );

というコードを記述してやれば任意のショートコードを呼び出すことが出来る。ただここで使うショートコードのphpファイルは記事中のショートコードで使う場合と違って子テーマのディレクトリ直下に保存されている必要があるのでそこだけ注意してほしい。

\\当サイトでも使用中のWordPressテーマ//

AFFINGER5 WINGを購入する

価格 14,800円(税込)※EX版はスタンダード版購入後に追加購入

\\当サイトの現在のテーマ AFFINGER5 EXを同梱//

AFFINGER PACK3を購入する

セット価格 55,900円 → 39,800円


-ブログ
-, , ,