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

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

こんな感じの流れる文字を無料で作る方法を紹介します！

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

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

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

INDEX

プラグイン「Simple Ticker」を使う方法
PHPとショートコードを使う方法

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

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

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

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

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

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

↑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を編集するときは、事前にバックアップをとっておくことをおすすめします。

				
					//流れる文字
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');