wordpress関連

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

スポンサーリンク

 

当ブログで使用しているショートコードの殆どは、「Post Snippets」プラグインを使って作成したショートコードです。 ショートコード作成毎に当ブログで紹介した記事をまとめて事例集にしました。

なお、今まで下の「Post Snippets Pluginで出来ること(小技集)」の中に事例集を含めていましたが今回「事例集」として分離しました。(2023/10/17)

 

 

スポンサーリンク

 

日時を表示させる

 

Amazonのサーチウィジェット広告を表示

 

スライドボックスに「閉じる」ボタンを実装

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

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

戻る・事例紹介 >

 

おすすめ記事記事をブログカードで2コラム タイル配列表示

 

PHPバージョンを調べる

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

blank
ロリポップサーバー PHP7.4(CGI版)への移行とPHPバージョンの確認方法

当ブログのレンタルサーバー先であるロリポップは、2020年5月14日 からPHP7.4の提供が開始されました。 このグレードアップで、PHPの処理速度の向上やセキュリティの向上などが図れるとのことで、 ...

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

現在のPHP バージョンは、PHP8.2.13 です。

戻る・事例紹介 >

 

QRコードを簡単設置

 

特定ページの広告を非表示にする囲み型ショートコード

 

Amazonのウィジェットコード・広告を使う

 

タグ(Tag)一覧を表示させる

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

blank
タグ(Tag)一覧を表示させるショートコードをPostSnippetsプラグインで作成する

当ブログでは、タグ(Tag)決めが面倒なこともあり、タグ(Tag)一覧を表示させていませんでした。 投稿記事数が100記事を超えたので、この際、投稿記事のキーワードを見直してタグを再設定してタグ(Ta ...

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

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

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

下の様にタグが表示されます

戻る・事例紹介 >

 

スポンサーリンク

 

jQueryでオススメ記事一覧を一定時間ごとに切替え表示

 

WordPressのネイティブAudio playerをカスタマイズする

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

blank
WordPressのネイティブ Audio player(ショートコード)をカスタマイズする(Post Snipetsプラグイン利用)

当ブログの性格上、投稿記事中に音声ファイルを配置する機会が多いので、Wordpressに組込まれたaudioショートコードよりオプション設定が簡単で使い勝手の良い「MediaElement.jsプラグ ...

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

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

Player スキンのカラー指定

ブラウン系 color="brown" 

ブルー系 color="blue" 

グリーン系 color="green" 

レッド系 color="red" 

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

戻る・事例紹介 >

 

外部(URL)ブログカード用ショートコードの作成

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

Affinger6になって、ブロックエディタへの機能が強化されて、「埋め込み」ブロック内に、外部(又は内部)のブログURLを記入すると従前のページidによる内部ブログカードと略同等のブログカードが表示される様になりました。 作成した外部(URL)ブログカード用ショートコードを使うと、旧クラシックエディタでも使用できる様になります。
内部カード表示
blank
Affinger6(WordPressテーマ)対応の外部(URL)ブログカード用ショートコードを作る。

Affinger6は、Gutenbergのブロックエディタへの機能が強化されて、「埋め込み」ブロック内に、外部(又は内部)のブログURLを記入すると従前のページidによる内部ブログカードと略同等のブロ ...

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

外部(URL指定)カード(表示例)

戻る・事例紹介 >

 

Affinger6の「Step」パーツをモディファイしたショートコード作成

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

Affinger6タグのテキストにある「ステップ(Step)」パーツ(ショートコード)は、個別ページで「Step」タイトル名や全体の配色を変えることが出来ません。 今回作成したショートコードを使えば、「Step」パーツのCSSをモディファイしますので、タイトル名や配色を個別ページ毎に変更できる様になります。
blank
「Step」パーツをモディファイしてオプションを拡張するショートコード

WordPressテーマのAffinger6タグのテキストにある「ステップ(Step)」パーツ(ショートコード)は、お気に入りのアイテムの一つです。 当ブログでは、このStepパーツを使って手順等を示 ...

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

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

Case
1
ここに表題を記述する

bg_color:brown flag_name:Case

point
2
ここに表題を記述する

bg_color:gray flag_name:point

Rank
3
ここに表題を記述する

bg_color:green flag_name:Rank

Hint
4
ここに表題を記述する

bg_color:無指定 flag_name:Hint

戻る・事例紹介 >

 

カスタムボタン「ミニ」にonclick属性を付与

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

WordPressテーマ Affinger6は、多種類のカスタムボタンが組み込まれていますが、殆どがURLリンクにジャンプする仕様になっています。 このため、Affinger6のボタンでは、呼び出したいfunction(関数)をonclickで実行することが容易ではありません。
blank
Affinger6のカスタムボタン「ミニ」にonclick属性を付与する囲みショートコードを作る

  WordPressテーマ Affinger6は、多種類のカスタムボタンが組み込まれていますが、殆どがURLリンクにジャンプする仕様になっています。 このため、Affinger6のボタンで ...

 shortcodeの説明
[BTN_with_onclick onclick="functionを記述" mystyle="styleを記述"][Affinger6「ミニ」ボタン][/BTN_with_onclick]
" "で囲まれた部分がオプションになります。
  1. 赤字【BTN_with_onclick 〜】がonclick属性を付与するショートコードで、Affinger6「ミニ」ボタンのショートコードを終点の【/BTN_with_onclick】で囲みます。
  2. onclick="functionを記述"は、" " 内にボタンがクリックされた時に呼び出す「関数」を記述します。
  3. mystyle="styleを記述"は、" " 内にstyleを直書きします。 例えば、ボタンをセンタリングしたい時は、margin:0 auto と記述します。 ボタンの縦幅は、line-height:☓☓px;  の☓☓pxで調整できます。
下のボタンが押されたたらアラート表示する使用例
 アラートボタンの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]

戻る・事例紹介 >

 

以上、「Post Snippets」事例紹介でした。 新たなショートコードを作成したら、事例紹介を追記します。

 

スポンサーリンク

 

スポンサーリンク

 

Hi-Reco Blog オススメ

をクリック(タップ)してご覧ください。)