ブログ記事タイトルや任意のテキスト、リンクをスクロール表示できる”スクロールマーキーウィジェット”を作ってみました。今まではHTMLでコードを書いて設置をしていたのですが、もっと簡単に設置したいと思いChatGPTに相談をしながら簡単にウィジェットで設定できるようにプラグイン化し作成してみました。ウィジェットで設定したものをショートコードでも設置可能としています。
お知らせや注目情報、プロモーションリンクの掲出ができるようになっています。興味のある方は使ってみてください。（もちろん無料配布です）
主な特徴
- 投稿記事、任意のテキストや外部リンクが混在可能
- 表示順序のカスタマイズ（例：投稿→テキスト→リンク）
- スクロールスタイルを4種類から選択可能
- 通常スクロール
- 左端で一時停止付きスクロール
- 中央で1件ずつ表示
- パックマン風アニメーション
- アイコン・文字色・背景色・フォントサイズ・背景の高さなどの見た目を設定可能
- 表示速度やループ回数も調整可能
- ウィジェットで設定した内容をショートコードで任意の場所に設置可能
ウィジェットの使い方
管理画面でウィジェットを追加
外観 > ウィジェット から「スクロールマーキーウィジェット」を任意のウィジェットエリアに追加します。
必要な情報を入力
① 表示順序 ‐ 投稿／テキスト／リンクの並び順を選択可能
② 表示スタイル ‐ 4つのスタイルから選択可能
③ 投稿ID ‐ 表示したい投稿のIDをカンマ区切りで入力（例：12,24,35）
④ 投稿リンクの開き方 ‐ 同一タブ・新しいタブ
⑤ テキスト ‐ 任意のテキストを1行ずつ入力
⑥ 外部リンク ‐ title=タイトル, url=https://example.comで入力
⑦ 外部リンクの開き方 ‐ 同一タブ・新しいタブ
⑧ アイコン/色 ‐ Font Awesomeクラス名で指定（例：fa fa-star）
⑨ フォントサイズ/色 - 任意の単位で入力（例：16px, 1.5em）
⑩ 行間/色 ‐ 背景の高さを任意の単位で入力（例：16px, 1.5em）
⑪ スクロール速度 ‐ 0.1 ～ 20 の範囲で調整（遅い～早い）
⑫ ループ回数 ‐ 0で無限ループ、指定回数で停止、非表示となる
⑬ このウィジェットのID ‐ ショートコードの内容表示
| ② 表示スタイル | 説明 |
|---|---|
| スクロール | 横スクロールで連続表示（標準） |
| スクロール/一時停止 | 1つずつスクロールし、左端で一時停止 |
| 一件ずつ中央表示 | 1件ずつ中央に表示しながらフェード |
| パックマン | パックマンが文字を食べるアニメーション（遊び心あり） |
表示スタイルについて
| スタイル名 | 説明 |
|---|---|
| スクロール | 横スクロールで連続表示（標準） |
| スクロール/一時停止 | 1つずつスクロールし、左端で一時停止 |
| 一件ずつ中央表示 | 1件ずつ中央に表示しながらフェード |
| パックマン | パックマンが文字を食べるアニメーション（遊び心あり） |
補足注意事項
| 項目 | 注意事項 |
|---|---|
| 投稿ID | 投稿IDはカンマ区切りで入力することにより複数の投稿記事タイトルを順番に表示することが可能です。表示される順番は入力順となります。 |
| テキスト 外部リンク | 改行で複数表示可能 表示される順番は入力順となります。 |
| このウィジェットのID | ウィジェットの設定を保存した時点で正式なショートコードIDが表示されます ”ショートコードで使用するには”に表示されているショートコードをお使いください |
| アイコン フォントサイズ 行間 | アイコンのサイズはフォントサイズと同じになります。 フォントサイズについて初期設定（空白時）は17px 行間の初期設置（空白時）は35px ※ スタイルでパックマンを選択した場合、パックマンのの大きさはフォントサイズの1.4倍の |
ショートコードでの使用方法
ショートコードを使えば、記事本文や固定ページ内にもウィジェットで設定した内容で表示が可能です。
使用例
設定したウィジェットを保存後、入力画面の下の部分に表示される ”ショートコードで使用するには” で表示されたショートコードを好きな場所に貼り付けて設置可能
例：
[scrolling_items widget_id="scroll_marquee_widget-18"]ショートコードだけで設置したい場合は、ウィジェットを設定後、ウィジェットを非表示することで設置可能
ショートコードを使って複数設置する場合、競合してうまく表示されないことがあります。
特に、投稿記事ページで複数表示の場合（例：本文中、サイドバー、タイトル上などに同時に設置した場合）
ウィジェットを非表示について
テーマでCocoonを使っている場合には、各ウィジェットの入力画面に”表示設定”がありますので、そこで”チェック・入力したページで表示する”を選択し全てのチェックがされていない状態で保存をします。
また、Cocoon以外のテーマを使用し、ウィジェットの入力画面に”表示設定”がない場合には、こちらのプラグインで代用することが可能ですのでご利用ください。
※ 表示モードで非表示期間設定にするだけです。
使用にあたっての注意事項
このプラグインは同じページ内に1つのスクロールマーキーウィジェットを設置する前提で作りこんでいます。
その為、複数のスクロールマーキーウィジェットを別スタイルで設置した場合、お互いの表示スタイルが干渉し正しく表示されない場合があります。
コメント