当ブログで使用しているショートコードの殆どは、「Post Snippets」プラグインを使って作成したショートコードです。 ショートコード作成毎に当ブログで紹介した記事をまとめて事例集にしました。
なお、今まで下の「Post Snippets Pluginで出来ること(小技集)」の中に事例集を含めていましたが今回「事例集」として分離しました。(2023/10/17)
Post Snippets Pluginの基本的使い方は、以下の記事を参照してください。
目 次
- 1 日時を表示させる
- 2 Amazonのサーチウィジェット広告を表示
- 3 スライドボックスに「閉じる」ボタンを実装
- 4 おすすめ記事記事をブログカードで2コラム タイル配列表示
- 5 PHPバージョンを調べる
- 6 QRコードを簡単設置
- 7 特定ページの広告を非表示にする囲み型ショートコード
- 8 Amazonのウィジェットコード・広告を使う
- 9 タグ(Tag)一覧を表示させる
- 10 jQueryでオススメ記事一覧を一定時間ごとに切替え表示
- 11 WordPressのネイティブAudio playerをカスタマイズする
- 12 外部(URL)ブログカード用ショートコードの作成
- 13 Affinger6の「Step」パーツをモディファイしたショートコード作成
- 14 カスタムボタン「ミニ」にonclick属性を付与
スポンサーリンク
日時を表示させる
-
-
WordPressに『日時』表示。PHPとJavaの使い分け
Wordpressのサイドバーなどに『日時』表示したい時がありますよね。 その時に初心者が悩むのがPHPを使うかJavascriptを使うかではないでしょうか? 夫々の言語の特性に沿って使い分ける必要 ...
日時を表示させると
javaで表示→ | |
PHPで表示→ |
Amazonのサーチウィジェット広告を表示
アソシエイト・プログラム のウィジェット機能が廃止になりました。(2022/4/19 追記)
-
-
Amazonアソシエイトのサーチウィジェット広告を使ってみました。
今まで、このブログはAmazonアソシエイトは、商品リンク(単品広告)だけを使用していて、ウィジェット広告は使用していませんでした。 ウィジェット広告ユニットは6種類あり(2019年8月現在)この中で ...
Amazonのサーチウィジェット広告を表示させると
スライドボックスに「閉じる」ボタンを実装
jQuery とPostSnippetsプラグインを併用してスライドボックスに「閉じる」ボタンを実装する方法です。(2020/9/4 追記)
スライドボックスに「閉じる」ボタンを実装した事例です。
おすすめ記事記事をブログカードで2コラム タイル配列表示
おすすめ記事記事をブログカードで2コラム タイル配列で表示します。(2020/5/23 追記)
-
-
Affinger5(WordPress )「オススメ記事一覧」のスタイルをカスタマイズする
Wordpress テーマのAffinger5は、オススメ記事一覧が簡単に投稿ページの下に表示することが出来ますが、あまりスマートでありません。 独自デザインで、ブログカードをタイルとして2コラム表示 ...
PHPバージョンを調べる
PostSnippesを使った、PHPバージョンを調べる方法です。(2020/5/23 追記)
-
-
ロリポップサーバー PHP7.4(CGI版)への移行とPHPバージョンの確認方法
当ブログのレンタルサーバー先であるロリポップは、2020年5月14日 からPHP7.4の提供が開始されました。 このグレードアップで、PHPの処理速度の向上やセキュリティの向上などが図れるとのことで、 ...
[php_saver_info nop="//"]ショートコードを記事に挿入してプレビューで確認すると下の様にサーバーのPHPバージョンがブラウザに表示されます。
現在のPHP バージョンは、PHP8.2.13 です。
QRコードを簡単設置
PostSnippesを使った、QRコードを簡単に設置する方法です。(2021/1/5 追記)
-
-
ブログページにQRコードを簡単に設置する方法(WordPressプラグインのPostSnippets利用)
例えば知り合いに自分のブログページ(Webページ)を教えたい時がありませんか? こんな時にブログページ内にQRコードを設置していれば、知り合いのスマホでQRコードを読み取ることで、簡単に当該のブログペ ...
[QRコード]ショートコードを記事に挿入してプレビューで確認すると このページ(URL)のQRコードが表示されます。
特定ページの広告を非表示にする囲み型ショートコード
特定ページの広告を非表示にする囲み型ショートコードです。(2021/2/24 追記)
-
-
Post Snippetsプラグインで特定ページの広告を非表示にする方法(囲みショートコードによる)
特定のページでAdSense広告等を非表示にしたい時があります。 例えば、知り合い同士に限定したパスワードで保護されたプライベートページで、AdSense広告がクリックされるとポリシー違反になる恐れ ...
[AD_block]
AdSense広告コード [/AD_block]
Amazonのウィジェットコード・広告を使う
アソシエイト・プログラム のウィジェット機能が廃止になりました。(2022/4/19 追記)
Amazonアフィリエイトのために、ウィジェットコードを使い回すショートコードの作成事例です。(2021/6/30 追記)
-
-
Amazonアソシエイトのウィジェットコード・広告を使う(アフィリエイト用)
当ブログでは、記事に関連する商品をAmazonアソシエイトの「商品リンク(単品商品広告)」 や「サーチウィジェット(複数商品広告)」等を使って掲載しています。 しかし、サーチウィジェット(詳しくは、こ ...
タグ(Tag)一覧を表示させる
タグ(Tag)一覧を表示させるショートコードの作成事例です。(2021/7/26 追記)
-
-
タグ(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でオススメ記事一覧を一定時間ごとに切替え表示
jQueryでオススメ記事一覧を一定時間ごとに切替え表示する紹介記事です(2021/12/8 追記)
-
-
Blogページにアクセスされたらジャンル毎のオススメ記事一覧をjQueryでランダム表示
当ブログでは、Webページの記事下に、推奨したいオススメ記事一覧を4つのジャンルに分けて切替えボタンを付けて表示していました。 この場合、閲覧者が切替ボタンを選択しない限り残りのジャンルは非表示のまま ...
[ジャンル]ボタンを押すと、動きが止まります。 [Reload]ボタンで動き開始
WordPressのネイティブAudio playerをカスタマイズする
WordPressのネイティブAudio playerをカスタマイズするショートコードの作成事例です。(2022/6/6 追記)
-
-
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"

外部(URL)ブログカード用ショートコードの作成
Affinger6(WordPressテーマ)対応の外部(URL)ブログカード用ショートコードの作成事例です。(2022/7/2 追記)
Affinger6になって、ブロックエディタへの機能が強化されて、「埋め込み」ブロック内に、外部(又は内部)のブログURLを記入すると従前のページidによる内部ブログカードと略同等のブログカードが表示される様になりました。 作成した外部(URL)ブログカード用ショートコードを使うと、旧クラシックエディタでも使用できる様になります。-
-
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をモディファイしますので、タイトル名や配色を個別ページ毎に変更できる様になります。-
-
「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で実行することが容易ではありません。-
-
Affinger6のカスタムボタン「ミニ」にonclick属性を付与する囲みショートコードを作る
WordPressテーマ Affinger6は、多種類のカスタムボタンが組み込まれていますが、殆どがURLリンクにジャンプする仕様になっています。 このため、Affinger6のボタンで ...
shortcodeの説明 [BTN_with_onclick onclick="functionを記述" mystyle="styleを記述"][Affinger6「ミニ」ボタン][/BTN_with_onclick] " "で囲まれた部分がオプションになります。
- 赤字【BTN_with_onclick 〜】がonclick属性を付与するショートコードで、Affinger6「ミニ」ボタンのショートコードを終点の【/BTN_with_onclick】で囲みます。
- onclick="functionを記述"は、" " 内にボタンがクリックされた時に呼び出す「関数」を記述します。
- 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]