WordPressでニュースティッカーを作成する方法

公開: 2021-04-26

雑誌、新聞、ブログを読むためのWordPress Webサイトを既にお持ちの場合は、サイトに情報が多すぎるため、訪問者の注目を集めるのが難しい場合があります。 これを解決するために、ニュースティッカーは間違いなくあなたの読書サイトをより読みやすく、有益でそして傑出したものにするための完璧な機能です!

目次を隠す
  1. 1.ニュースティッカーとは何ですか?
  2. 2.なぜニュースティッカーを使用する必要があるのですか?
  3. 3. WordPressでニュースティッカーを追加するにはどうすればよいですか?
    1. 3.1。 ステップ1:新しいニュースティッカーを追加する
    2. 3.2。 ステップ2:ニュースティッカーを設定する
    3. 3.3。 ステップ3:ニュースティッカーを表示する
  4. 4.最後の言葉

この投稿では、ニュースティッカーとは何か、なぜそれらを使用する必要があるのか、そしていくつかの簡単な簡単な手順で印象的なニュースティッカーを作成する方法を紹介します。

始めましょう!

ニュースティッカーとは何ですか?

オンラインマガジン、オンライン新聞などの一部の種類のWebサイトでは、下部またはヘッダー、フッター、サイドバーでスクロールするニューススライドが表示される場合があります。 これらのニューススライドは、テレビのニュース番組のスライドのように見えます。

テレビのニュース番組や雑誌のウェブサイトのニュースティッカーを一瞥することで、視聴者は最もホットで最も目立つ情報を得ることができます。 通常、1つのニュースティッカーにはティックと呼ばれる多くの情報があります。

下のgifのように、ヘッドラインニュースが流れているのを見ますか? これがニュースティッカーの仕組みです。

ニュースティッカーは、WordPressのWebサイトの見出しで実行されます。

WordPressのニュースティッカーの例

ニュースティッカーを使用する必要があるのはなぜですか?

ニュースティッカーには、さまざまな種類のWebサイトにさまざまな利点があります。

  • 雑誌の場合、ニュースティッカーは、注目すべき情報や投稿を強調するのに役立ちます。
  • ポートフォリオの場合、彼らはあなたの顕著な仕事の経験と報酬に採用担当者の注意を引き付けます。
  • 他の種類のWebサイトの場合、ニュースティッカー自体がサイトのハイライトになり、たとえばブログをより魅力的でプロフェッショナルなものにします。

したがって、ニュースティッカーは明らかにWebサイトの所有者にとって便利なツールです。 それ以上に、WordPressWebサイトにニュースティッカーを追加するのは非常に簡単です。 次のパートに移動して、自分で入手してみましょう。

WordPressでニュースティッカーを追加する方法は?

ニュースティッカーを追加する方法はたくさんあります。

最初にニュースティッカー事前に作成されテーマを使用できます。 それが最も簡単でしょう。 テーマのドキュメントを注意深く読んでください。

ただし、すべてのテーマにそのような既成のニュースティッカーがあるわけではありません。 したがって、これらの場合、ページビルダーまたはプラグインの使用を検討できます。

この投稿では、 Ditty NewsTickerプラグインと呼ばれる無料のプラグインを使用します。 それは無料で、非常に使いやすく高度にカスタマイズ可能です。 ダッシュボードでダウンロードしてアクティブ化するだけです。

プラグインのインストール方法について詳しくは、こちらをご覧ください。

Ditty News Tickerは、ニュースティッカーの作成に役立つ無料のプラグインです。

さて、これ以上躊躇せずに、3つのステップに従って、サイトにすばらしいニュースティッカーを掲載しましょう。

ステップ1:新しいニュースティッカーを追加する

まず、[ニュースティッカー] > [新規追加]に移動します。

新しいニュースティッカーを追加する

次の画面に、タイトルの追加、ショートコード、ティッカーモード、ティッカータイプ、グローバル設定の5つのタブが表示されます。 これらのタブは、ニュースティッカーを構成および表示するために使用されます。

これらのタブは、WordPressWebサイトでニュースティッカーを構成および表示するために使用されます。

覚えておくべきことが多すぎると思いますか? 心配しないでください、私たちはあなたのためにそれを短く明確にします:

まず、ティッカーに名前を付けます。 [タイトル追加]タブに名前を入力します。 タイトルは通常、ティッカーの上部に表示されるため、訪問者の注意を引くために魅力的な名前を考え出すようにしてください。

ニュースティッカーに名前を付ける

その後、[ティッカータイプ]をクリックし、[ティッカーテキスト]セクションのニュースティッカー(必要に応じてリンク付き)に表示するコンテンツを追加します。

上で述べたように、ニュースティッカーには多くのティックが含まれている可能性があります。 ( + )ボタンをクリックして追加し、( x )ボタンをクリックして削除します。

ニュースティッカーの目盛りの量をカスタマイズします。

ステップ2:ニュースティッカーを設定する

新しいニュースティッカーを入手したら、それを構成して、より目を引くようにする必要があります。

まず、ニュースティッカーの表示方法を選択します。 ティッカーモードをクリックすると、スクロール、回転リストの3つのオプションが表示されます。 実際、スクロールは最も一般的なオプションですが、サイトに最適なオプションを決定できます。

ニュースティッカーの表示方法を選択してください

上記の3つのオプションのいずれかを選択すると、下のさまざまなタブでティッカーの動作を調整できます。

個人的にはスクロールモードを選んだので、スクロール動作を調整します。 注意すべき重要な点が2つあります。スクロール速度ティックスペースです。 実際には、最適なパラメータを見つけるために何度も試行する必要があります。 私にとっては、スクロール速度が8で、ティックスペースが10ピクセルの方が好きです。

また、マウスオーバーオプションで[一時停止]にチェックマークを付けると、チェックマークをクリックしたときにニュースティッカーの移動が停止します。

クリックするとティッカーの動きが止まります。

さらに、[グローバル設定]をクリックすると、ティッカーをカスタマイズするためのその他のオプションが表示されます。 たとえば、ティッカーのタイトルをその上に配置する場合は、[タイトルの表示]にチェックマークを付けます。 または、ティックがないときにティッカーを非表示にする場合は、下の図のようにオプションにチェックマークを付けます。

[グローバル設定]をクリックすると、ティッカーをカスタマイズするためのその他のオプションが表示されます

これで、ニュースティッカーを表示する準備が整いました。

ステップ3:ニュースティッカーを表示する

画面上部の[ショートコード]タブに戻りましょう。

[ショートコード]タブは画面の上部にあります

このショートコードを挿入した場所にニュースティッカーが表示されます。 ホームページのフッター、投稿、サイドバーウィジェットなど、どの位置にも追加できます。

通常、投稿のコンテンツにニュースティッカーを使用することはありません。 ニュースティッカーをヘッダー、フッター、またはサイドバーに配置するとよいでしょう。 サイドバーのニュースティッカーの例を紹介します。 まず、ランダムなページを選択し、[プレビュー] > [カスタマイズ] > [ウィジェット]に移動します。

ウィジェットに移動

次に、[サイドバー] > [ウィジェットの追加]に移動します。 オーディオ、カレンダーなど、追加のサイドバーのオプションが多数表示されます。[テキスト]を選択すると、サイドバーの名前を追加してショートコードを貼り付けるための小さなボックスが表示されます。

ショートコードをテキストボックスに貼り付けます。

あなたは多くのステップを実行しましたね? ただし、カスタムカラー、フォントサイズ、不透明度などを使用してニュースティッカーをより美しくしたい場合は、まだやるべきことが少しあります。 このプラグインの無料バージョンは、ユーザーがこれらのパラメーターを調整することをサポートしていません。 したがって、以下のgifのような結果しか得られません。

これがニュースティッカーの表示です。

ニュースティッカーはそれほど美しく見えないので、CSSで少しスタイルを設定しました。 [カスタマイズ] > [追加のCSS]に移動します。

CSSによるスタイルニュースティッカー

そこに、コードを追加するための小さなボックスが表示されます。 これらのコードは、ニュースティッカーの外観を変更します。

青と白のメインパレットでメモリテーマを使用しています。 したがって、このCSSを追加して、青色のニュースティッカーを作成しました。

 .mtphr-dnt-tick-contents a {
	色:var(-main-color);
}

.mtphr-dnt-tick-contents a:hover {
	色:#000;
}

[公開]をクリックして、次の情報を確認してください。

スタイリングの結果。

これはあなたのための簡単な例です。 自分でもっと素晴らしいニュースティッカーを作ることができると確信しています。 やるだけやってみよう!

最後の言葉

これで、Ditty NewsTickerプラグインによってWordPressWebサイトにニュースティッカーを追加することができます。 短く明確にするために最善を尽くしましたので、この投稿がお役に立てば幸いです。

チュートリアルについて疑問や質問があるかもしれませんので、コメントセクションでお気軽にお知らせください。 このプラグインの高度なオプション、またはプラグインを使用せずにニュースティッカーを追加する他の方法に関するより詳細なチュートリアルを紹介します。 したがって、私たちを接続することを忘れないでください!