如何在 WordPress 中創建新聞行情

已發表: 2021-04-26

如果您已經有一個用於雜誌、報紙或閱讀博客的 WordPress 網站……,您可能難以將訪問者的注意力吸引到優秀的帖子上,因為您的網站塞滿了太多信息。 為了解決這個問題,新聞行情絕對是一個完美的功能,可以讓您的閱讀網站更具可讀性、信息量和出色!

目錄隱藏
  1. 1.什麼是新聞快訊?
  2. 2.為什麼要使用新聞代碼?
  3. 3.如何在 WordPress 中添加新聞行情?
    1. 3.1. 第 1 步:添加新的新聞代碼
    2. 3.2. 第 2 步:配置新聞自動收報機
    3. 3.3. 第 3 步:顯示新聞代碼
  4. 4.遺言

在這篇文章中,我們將向您展示什麼是新聞自動收報機,我們為什麼要使用它們,以及如何通過幾個簡單的快速步驟創建一個令人印象深刻的新聞自動收報機

讓我們開始吧!

什麼是新聞代碼?

在某些類型的網站(如在線雜誌、在線報紙)上,您可能會看到一些新聞幻燈片在底部或頁眉、頁腳或側邊欄滾動。 這些新聞幻燈片看起來像電視新聞節目中的幻燈片。

通過瀏覽電視新聞節目或雜誌網站上的新聞行情,觀眾可以獲得最熱門、最引人注目的信息。 在一個新聞自動收報機中,通常有很多條信息,稱為滴答聲

如下面的 gif 所示,您是否看到正在運行的頭條新聞? 這就是新聞自動收報機的工作原理。

新聞自動收報機在標題 WordPress 網站中運行。

WordPress 中的新聞自動收報機示例

我們為什麼要使用新聞代碼?

新聞行情對不同類型的網站有各種好處:

  • 對於雜誌,新聞行情幫助您突出顯示要注意的信息和帖子。
  • 對於作品集,它們將招聘人員的注意力吸引到您顯著的工作經驗和獎勵上。
  • 對於其他類型的網站,新聞行情本身將成為網站的亮點,例如,使您的博客更具吸引力和專業性。

因此,新聞自動收報器顯然是網站所有者的有用工具。 更重要的是,將新聞行情添加到您的 WordPress 網站非常容易。 讓我們進入下一部分,為自己準備一個吧!

如何在 WordPress 中添加新聞行情?

有很多方法可以添加新聞自動收報機。

您可以在開始時使用帶有新聞行情預先構建主題; 那將是最簡單的。 只需仔細閱讀主題的文檔。

但是,並非每個主題都有這樣的預製新聞自動收報機。 因此,在這些情況下,您可以考慮使用頁面構建器或插件。

在這篇文章中,我們將使用一個名為Ditty News Ticker plugin的免費插件。 它是免費的,非常易於使用高度可定制。 您只需要在 Dashboard 上下載並激活它。

您可以在此處閱讀有關如何安裝插件的更多信息。

Ditty News Ticker 是一個免費插件,可幫助您製作新聞行情。

現在,讓我們不再猶豫,按照我們的 3 個步驟在您的網站上擁有一個驚人的新聞自動收報機:

第 1 步:添加新的新聞代碼

首先,轉到News Ticker > Add New

添加新的新聞代碼

在下一個屏幕上,您將看到以下 5 個選項卡:添加標題、簡碼、代碼模式、代碼類型和全局設置。 這些選項卡用於配置和顯示您的新聞行情。

這些選項卡用於在您的 WordPress 網站中配置和顯示您的新聞行情。

你覺得有太多的事情要記住嗎? 別擔心,我們會為您簡明扼要地說明:

首先,給你的股票起一個名字。 在“添加標題”選項卡中鍵入名稱。 標題通常顯示在代碼的頂部,所以盡量想出一個有吸引力的名字來吸引訪問者的注意力。

為您的新聞代碼命名

之後,單擊Ticker Type ,然後在Ticker Text部分添加要顯示在新聞代碼中的內容(如有必要,帶有鏈接)。

正如我上面提到的,您的新聞自動收報機可能包含許多滴答聲。 只需單擊 ( + ) 按鈕添加一個,然後單擊 ( x ) 按鈕刪除。

自定義新聞代碼中的滴答數量。

第 2 步:配置新聞自動收報機

有了新的新聞快報後,還需要通過配置讓它更加醒目。

首先,選擇您的新聞代碼的顯示方式。 單擊Ticker Mode ,您將看到 3 個選項: Scroll、RotateList 。 事實上, Scroll是最常見的選項,但您可以決定哪種方式最適合您的網站。

選擇您的新聞代碼的顯示方式

選擇上述三個選項之一後,您可以通過下面的各種選項卡調整代碼的行為。

就個人而言,我選擇了滾動模式,所以我會調整滾動動作。 有兩件重要的事情需要注意: Scroll SpeedTick Space 。 實際上,您必須多次嘗試才能找到最合適的參數。 對我來說,我更喜歡 8 的滾動速度和 10 像素的刻度空間。

此外,我還勾選了鼠標懸停時暫停選項,這樣當我想點擊一個勾時,新聞自動收報機就會停止移動。

股票將在點擊時停止移動。

此外,當點擊全局設置 時,您將看到一些其他選項來自定義代碼。 例如,如果您希望股票代碼的標題位於它們的頂部,請勾選Display title 。 或者,如果您想在沒有刻度時隱藏代碼,請勾選下圖所示的選項。

單擊全局設置時,您將看到一些其他選項來自定義代碼

現在您的新聞快報已準備好顯示!

第 3 步:顯示新聞代碼

讓我們回到屏幕頂部的Shortcode選項卡:

簡碼選項卡位於屏幕頂部

新聞自動收報機將顯示在您插入此短代碼的位置。 您可以將其添加到任何位置:主頁的頁腳、帖子、側邊欄小部件、...

通常,我們不會在帖子的內容中使用新聞代碼。 如果您將新聞代碼放在頁眉、頁腳或側邊欄上會更好。 我可以舉一個側邊欄新聞自動收報機的例子。 首先,我選擇一個隨機頁面,轉到它的Preview > Customize > Widget

轉到小部件

然後,轉到側邊欄>添加小部件。 您將看到許多其他側邊欄的選項,例如音頻、日曆……選擇文本,然後您將看到一個小框來添加側邊欄的名稱並粘貼您的短代碼:

將您的短代碼粘貼到文本框中。

你已經做了很多步驟了吧? 但是如果你想讓你的新聞行情更漂亮,自定義顏色、字體大小、不透明度……,你還有一些工作要做。 此插件的免費版本不支持用戶調整這些參數。 所以我們只有如下 gif 的結果:

這是新聞行情顯示。

新聞行情看起來不太漂亮,所以我用 CSS 對其進行了一些設計。 轉到自定義>附加 CSS

通過 CSS 樣式新聞行情

在那裡您將看到一個用於添加代碼的小框。 這些代碼將改變您的新聞行情的外觀。

我正在使用帶有藍色和白色主調色板的記憶主題。 因此,我添加了這個 CSS 以獲得藍色的新聞摘要:

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

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

點擊Publish ,看看我們有什麼:

造型的結果。

這裡只是給你一個簡單的例子。 我相信你可以自己製作一個更令人驚嘆的新聞自動收報機。 試一試吧!

最後的話

這就是通過 Ditty News Ticker plugin 向您的 WordPress 網站添加新聞自動收報機的全部內容。 我們已盡力使其簡短明了,因此我們希望這篇文章對您有用。

也許您對我們的教程有一些疑問或疑問,請隨時在評論部分告訴我們。 我們願意向您展示有關此插件中高級選項的更詳細教程,或其他無需使用插件即可添加新聞行情的方法。 因此,不要忘記聯繫我們!