Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
このサイトは快適なテーマ「SWELL」を使用しています SWELLについて

[WordPress] ブロックエディターでショートコードを使う

ショートコード

エディター内にはPHPを書く事はできません。でも必要な事もありますよね。例えば、記事一覧を引っ張ってきたいとか。ちょっとしたコードを使いまわししたい時とか。

ブロックエディタ(Gutenberg)では、エディター内のウィジェットからショートコードを書く事が出来る様になっています。コードが使える様になるのでサイト制作の幅が広がりますね。2種の方法をシェアします。

INDEX

ショートコードの書き方(基本)

編集画面からショートコードを呼び出し、[カッコ]の中にコードを入力します。

ショートコード

phpファイルを読み込む

投稿や固定ページ内でphpファイルをショートコードで読み込みます。コードが長い場合に適していると思います。インクルードっていう方法です。

子テーマ内に[template-parts]というフォルダを作成したとします。その中に作成したphpファイルを準備します。

子テーマ内にあるfunction.phpに以下のコードを書きます。[template-parts]の部分は、ご自分が作成したフォルダ名に変更可能です。

//shortcode 外部ファイルの読み込み
function my_php_Include($params = array()) {
    extract(shortcode_atts(array('file' => 'default'), $params));
    ob_start();
    include(get_stylesheet_directory(). "/template-parts/$file.php");
    return ob_get_clean();
   }
   add_shortcode('myphp', 'my_php_Include');

そのファイルをショートコードを投稿や固定ページでtest.phpを読み込みます。

[myphp file='test']

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

自分で作ってしまう方法です。ちょっとしたコードを差し込みたい場合に最適だと思います。

子テーマ内にあるfunction.phpに以下のコードを書きます。[mytest-code]は任意の名前を付けて下さい。それが、自作したショートコードの名前です。

add_shortcode(ショートコード名, パラメータ)となります。

function my_func( $atts ){
	return "<p>あいうえお</p>"; //実行したい処理
}
add_shortcode( 'mytest-code', 'my_func' );

上記ではreturnで「あいうえお」と表示させていますが、もちろん if ・・・endifとか、バリバリ必要なコードを書いて下さい。

あとは、エディター画面からショートコードを書くだけ

[mytest-code]
よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX