絞れば、出てくる、アイディア。

ワードプレスに流れる文字を表示させる方法

ワードプレスに流れる文字を表示させる方法

ワードプレスに↑こんな感じで右から左へ流れる文字を無料で実装する方法を紹介します!

プラグインで簡単に表示させる方法と、phpの編集(コピー&ペーストで簡単)とショートコードを使って表示させる方法の2つの方法を紹介します。

テーマに関係なく、簡単に、無料で流れる文字を追加する事ができるので、ぜひ参考にしてみてください👍

1. プラグイン「Simple Ticker」を使う方法

Simple Ticker(シンプルティッカー)は、流れる文字を簡単に表示させる事ができるプラグインで、無料で使う事ができます。

Simple Ticker(シンプルティッカー)は、流れる文字を簡単に表示させる事ができるプラグインで、無料で使う事ができます。

まず初めに、ワードプレスのメニューから「プラグイン」選択し、「新規プラグインを追加」をクリックします。

↑まず初めに、ワードプレスのメニューから「プラグイン」選択し、「新規プラグインを追加」をクリックします。

キーワードの検索で「Ticker」と入力します。 歯車のマークがアイコンの「Simple Ticker」が表示されたら、「今すぐインストール」をクリックします。 インストールが終わったら、「有効化」ボタンをクリックしてプラグインを有効化します。

↑キーワードの検索で「Ticker」と入力します。
歯車のマークがアイコンの「Simple Ticker」が表示されたら、「今すぐインストール」をクリックします。

インストールが終わったら、「有効化」ボタンをクリックしてプラグインを有効化します。

プラグインの有効化が完了したら、ワードプレスのメニューの「設定」から「Simple Ticker」をクリックします。

↑プラグインの有効化が完了したら、ワードプレスのメニューの「設定」から「Simple Ticker」をクリックします。

Simple Tickerのページに入ったら、「使い方」を開き、「ショートコードの設置」の上から2番目のコードをコピーしておきます。

↑Simple Tickerのページに入ったら、「使い方」を開き、「ショートコードの設置」下記の↓のコードをコピーしておきます。

				
					[simpleticker ticker1_text="Ticker test!!" ticker1_color="#008000" sticky_posts_display=FALSE]
				
			
流れる文字の速度は、「速度調整」のスライダーで調整できます。

流れる文字の速度は、「速度調整」のスライダーで調整できます。
デフォルトの速度は結構遅めに設定されています。

設定を変更したら、画面下部の「変更を保存」ボタンをクリックします。

流れる文字を表示させたい固定ページや投稿の編集画面を開き、表示させたい箇所に「ショートコード」のブロックを追加します。

↑流れる文字を表示させたい固定ページや投稿の編集画面を開き、表示させたい箇所に「ショートコード」のブロックを追加します。

先ほどコピーしたショートコードを貼り付けます。

↑先ほどコピーしたショートコードを貼り付けます。

ticker1_text=””の部分にテキストを入力します。
ticker1_color=””の部分には文字の色を入力します。(黒なら#000000、青なら#0067C0 など)

↑プレビューまたは固定ページもしくは投稿を公開(更新)して、見た目を確認します。
流れる文字を表示させる事ができました!

2. PHPとショートコードを使う方法

2つ目の方法は、PHPショートコードを組み合わせて使う方法です。
プラグインを入れずに流れる文字を表示させたい場合は、こちらの方法を使うこともできます。

ワードプレスのメニューから「外観」→「テーマファイルエディター」をクリックします。 画面右側の「テーマのための関数(functions.php)」をクリックし、下記のコードを既存のコードの下にコピーして貼り付けます。

↑ワードプレスのメニューから「外観」「テーマファイルエディター」をクリックします。
画面右側の「テーマのための関数(functions.php)」をクリックし、下記のコードを既存のコードの下にコピーして貼り付けます。

※functions phpを編集するときは、事前にバックアップをとっておくことをおすすめします。

				
					//流れる文字
function ticker_shortcode($atts, $content = null) {
// ショートコードの属性を解析
$atts = shortcode_atts(
array(
'text' => 'This is a ticker text.',
'font' => 'IBM Plex Sans JP',
'color' => '#232323',
'size' => '18px',
'speed' => '3', // デフォルトのスピード
),
$atts,
'ticker'
);

// ティッカーのHTMLを生成
$html = '<div class="ticker" style="font-family: ' . $atts['font'] . '; color: ' . $atts['color'] . '; font-size: ' . $atts['size'] . ';">';
$html .= '<marquee behavior="scroll" direction="left" scrollamount="' . esc_attr($atts['speed']) . '">';
$html .= esc_html($atts['text']);
$html .= '</marquee>';
$html .= '</div>';

return $html;
}
add_shortcode('ticker', 'ticker_shortcode');
				
			

↑今回はブログの無料テーマとして人気な「Cocoon」の子テーマを使用しているワードプレスに追加する想定で、functions.phpに先ほどのコードを貼り付けます。

コードを貼り付けたら、「ファイルを更新」をクリックします。

↑コードを貼り付けたら、「ファイルを更新」をクリックします。

流れる文字を表示させたい固定ページや投稿の編集画面を開き、表示させたい箇所に「ショートコード」のブロックを追加します。

↑流れる文字を表示させたい固定ページや投稿の編集画面を開き、表示させたい箇所に「ショートコード」のブロックを追加します。

ショートコードの箇所に下記のショートコードをコピーして貼り付けます。 〇〇の部分に、文字を入れます。また、fontやcolor、文字のサイズも変更できます。

↑ショートコードの箇所に下記のショートコードをコピーして貼り付けます。
※前後に[]を足してください。

ticker text=”〇〇〇〇” font=”Noto Serif JP” color=”#232323″ size=”18px” speed=”3″

〇〇の部分に、文字を入れます。また、fontやcolor、文字のサイズも変更できます。

ページを更新して、表示を確認します!

Elementorにおすすめのプラグインこちら↓の記事で詳しく紹介しています!

まとめ😆

今回は、ワードプレスに流れる文字を表示させる方法を紹介しました。
プラグインを使っても、使わなくても、どちらでも簡単に流れる文字を表示させることができます。

ぜひ今回紹介した方法を使って、ブログやWEBサイトに流れる文字を表示させてみてください!