WordPress「Post Snippets」プラグインを利用したショートコード事例紹介

日時を表示させると

戻る・事例紹介 ＞

jQuery とPostSnippetsプラグインを併用してスライドボックスに「閉じる」ボタンを実装する方法です。（2020/9/4　追記）

スライドボックスに「閉じる」ボタンを実装した事例です。

戻る・事例紹介 ＞

おすすめ記事記事をブログカードで２コラム タイル配列で表示します。（2020/5/23 追記）

戻る・事例紹介 ＞

PostSnippesを使った、PHPバージョンを調べる方法です。（2020/5/23 追記）

[php_saver_info nop="//"]ショートコードを記事に挿入してプレビューで確認すると下の様にサーバーのPHPバージョンがブラウザに表示されます。

戻る・事例紹介 ＞

PostSnippesを使った、QRコードを簡単に設置する方法です。（2021/1/5 追記）

[QRコード]ショートコードを記事に挿入してプレビューで確認すると   このページ（URL）のQRコードが表示されます。

戻る・事例紹介 ＞

特定ページの広告を非表示にする囲み型ショートコードです。（2021/2/24 追記）

[AD_block] AdSense広告コード [/AD_block]

戻る・事例紹介 ＞

タグ（Tag）一覧を表示させるショートコードの作成事例です。（2021/7/26 追記）

WordPressのタグクラウド関数「wp_tag_cloud()」を使って関数のオプションも簡単に変更できるようにしたショートコードです。　

 shortcode
[tag format="flat" number="20" cnt_flg="1" orderby="name" order="ASC"]
" "で囲まれた部分がオプションになります。

タグをflatで表示、タグ表示数を20、タグの使用数を表示、タグの並び順をnameに、タグの表示順を昇順(ASC)にセットしています。

戻る・事例紹介 ＞

jQueryでオススメ記事一覧を一定時間ごとに切替え表示する紹介記事です（2021/12/8 追記）

戻る・事例紹介 ＞

WordPressのネイティブAudio playerをカスタマイズするショートコードの作成事例です。（2022/6/6 追記）

新たに作成したショートコードとPlayer スキンのカラーリング事例を示します。

 new shortcode
[Audio_player src="url.mp3" width="300px" margin="0" color="default"]
" "で囲まれた部分がオプションになります。

ブラウン系 color="brown" 

ブルー系 color="blue" 

グリーン系 color="green" 

レッド系 color="red" 

オペレータ

このショートコードはフルで記述する必要はありません。　指定したいオプションを記述するだけでOKです。　例えば横幅を400pxに指定したければ[Audio_player src="url.m4a" width="400px"]だけでOKです。

戻る・事例紹介 ＞

Affinger6（WordPressテーマ）対応の外部（URL）ブログカード用ショートコードの作成事例です。（2022/7/2 追記）

 new shortcode
[wp_card url="" class="" width="100%" margin="0"]
" "で囲まれた部分がオプションになります。

戻る・事例紹介 ＞

Affinger6の「ステップ(Step)」パーツをタイトル名や配色のオプションを拡張するショートコードの作成事例です。

 shortcodeの説明
[point_flag bg_color="brown" flag_name="Case" number="1"]ここに表題を記述する[/point_flag]
" "で囲まれた部分がオプションになります。

〜〜　ショートコードの表示例　〜〜

bg_color：brown　flag_name：Case

bg_color：gray　flag_name：point

bg_color：green　flag_name：Rank

bg_color：無指定　flag_name：Hint

戻る・事例紹介 ＞

Affinger6のカスタムボタン「ミニ」にonclick属性を付与する囲みショートコードの作成事例です。

 shortcodeの説明
[BTN_with_onclick onclick="functionを記述" mystyle="styleを記述"][Affinger6「ミニ」ボタン][/BTN_with_onclick]
" "で囲まれた部分がオプションになります。

 アラートボタンのshortcode構成
[BTN_with_onclick onclick="alert('「アラート」ボタンがクリックされました！')" mystyle="margin:0 auto;line-height:25px;"]
[st-mybutton-mini url="#" title=" アラート" rel="" webicon="st-svg-exclamation-circle" target="_blank" 
color="#fff" bgcolor="#ef5350" bgcolor_top="" bordercolor="" borderwidth="" borderradius="30" 
fontsize="" fontweight="bold" webicon_after="st-svg-angle-right" shadow="black" ref="on" beacon=""]
[/BTN_with_onclick]

戻る・事例紹介 ＞

jQuery load()メソッドを使って、ボタンやリスト項目をクリックすると外部ファイルをインクルード（取込）表示するショートコードの作成事例です。

 完成したshortcode
[load_method func="func1()" onclick="off" list_flg="list_off" output="out1" load_url="" style=""]

　　 func=func1(),onclick=off,list_flg=list_off,output=out1,load_url,style

オペレータ

ここから、[load_method]ショートコードでHTMLファイルをインクルードした事例紹介になります。

戻る・事例紹介 ＞

PostSnippesのショートコードで、旧エディタで「しゃべるモード」を実現する方法です。（2024/11/4 追記）

WordPressテーマのAffinger6はver20241022から会話ふきだしに「しゃべるモード」が実装されました。　残念ながら、ショートコードが非対応のため、ブロック エディタのみの対応ですので通常、クラシックエディタ(旧エディタ)で「しゃべるモード」が使えません。

「しゃべるモード」は、下に示す様に、会話ふきだしのテキストをタイピングアニメーションで表示されます。

 new shortcode
[kaiwa_typing kaiwa_no="1" position=""]ここに会話を記述する[/kaiwa_typing]

オプション指定例：
kaiwa_no="4" position="r"

このショートコードを旧エディタで使用すれば、会話ふきだし「しゃべるモード」が実現できます！

オペレータ

　リロード

戻る・事例紹介 ＞