実用8. Popups – WordPress Popup

テスト ポップアップ

サイトの本文中に説明文等をポップアップ表示させるプラグインです。
わたしは主にCSSやPHPのコード記述を表示しています。
『Popups – WordPress Popup』をプラグインに追加、有効化します。

ダッシュボードにPopupsが出現します。
クリックしたものが下図です。実際は、『Popups Example – 下書き』だけです。
どちらかのAdd Newで新規作成です。

 
なんて、ご機嫌な書き出しでスタートしましたが、、、。
他のテーマ(Cocoon)では何の問題も無く使えますが、この fsvbasic ではうまく機能してくれませんでした。
そもそもが、長くなったCSSやPHPのコード記述をボタンでポップアップしたかったので、説明文等の普通のテキストは想定して無かったのです。
コード記述には『prism.js』を採用していて、そのCSSがうまく作用してくれています。
試行錯誤の上にたどり着いた方法の備忘録です。
 

作成画面

タイトル、本文

図のようにタイトルと本文を入力します。

 

PopUp Appearance

Background color(背景色)、Box width(横幅)等を設定します。

 

PopUp Display Rules

水色マーカー部分がショートコードです。

 

Display Options

Trigger action がポップアップを開く時のルールです。デフォルトでは5秒後に開く設定です。
Manual Triggering でクリックした際に開く設定です。

 

ポップアップ使用時のコツ

通常、HTMLコードを記述する際は、『prism.js』のルールで以下のように記述しています。
コードの場合は、ポップアップ作成の本文にそのまま入れれば正常動作します。

<pre><code class="language-php" data-language="php">
ここにエスケープしたコードを記述
</code></pre>

 

普通のテキストの場合

下がサンプルです。クリックで開きます。
テスト ポップアップ
 
これは、以下のように記述しています。
『prism.js』のルールのアレンジの 赤文字タグ を追加するだけです。

<pre class="language-txt">
<div style="text-align: center; text-decoration:none; padding: 3px 10px; margin: 0px; color: #ffffff; background-color: #333333; border-style: solid; border-width: 1px; border-color: #cccccc;">ポップアップサンプル</div>
こんな感じで画像も挿入出来ます。
<img src="https://〜〜〜/wp-content/uploads/gazoumei.png" alt="" width="" height="" />
普通に文章だけだとなぜか1行に重なって表示されてしまいます。

<span style="color: #ff0000;">文字色</span>や<b>太字</b>程度なら表示できます。
見出しタグ(H2、H3等)は無視されます。
</pre>

 

使用方法

『PopUp Display Rules』で紹介した水色マーカー部分のショートコードをポップアップさせたい記事の任意の場所にコピペでOKです。

デフォルト例:[spu popup="123"]Click here[/spu]
装飾例:[spu popup="123"]<span class="botan-white">テスト ポップアップ</span> <i class="fas fa-external-link-alt"></i>[/spu]