臺州高端網站設計:如何自定義WordPress讀取更多鏈接文本

臺州網站建設 | 2019-04-02

如果將WordPress站點設置為將文章顯示為摘錄,則很可能會顯示一定數量的文本,然后顯示一個通常稱為“多讀一點“鏈接。

這個鏈接的目的是為用戶提供文章的快速摘錄,這樣他們就可以快速瀏覽你博客上所有最近的文章。這樣做可以為用戶提供更多的選擇,從而提供更豐富的體驗。

今天臺州高端網站設計將剖析“讀更多“在WordPress里面貼上標簽,教你如何根據自己的喜好定制它。

基礎

的大多數用途讀更多標記與WordPress節選函數一起使用,該函數顯示一個設置數量的單詞/字符。默認情況下,WordPress將其限制在一定數量的單詞上,但臺州高端網站設計將很快向您展示如何調整此設置。

WordPress中的節選標記是一行PHP,如下所示:

<?php the_excerpt(); ?>

可以換掉the_content()模板標簽可行時。通常情況下,你會有一個博客指數列出您最近的文章的頁面。這些帖子可以通過簡單的交換來使用摘錄。內容()模板標簽節選()模板標簽

如果你去拜訪我們博客把你的注意力集中在那一頁上的一個帖子上,你就會明白我指的是什么。

臺州高端網站設計

這是我們試圖實現的東西,以優雅的主題博客為例。

這篇課文是一段小摘錄,帶著“尾聲”。…“后面是一個有標題的按鈕查看滿郵

自定義讀更多標簽

要開始,您首先需要確保在WordPress安裝的管理區域內啟用了摘錄。

頭到你的WordPress管理員和登錄。導航到將軍設置鏈接位于左側,并在其中單擊讀

將閱讀設置更改為摘要,而不是全文。

您應該會看到一些設置,但是我們關注的是帶有標簽的部分。對于提要中的每一篇文章,請顯示。您還可以控制在博客頁面上顯示的帖子數量。那我就交給你了。現在,我將保持原樣。

繼續選擇摘要而不是全文單選按鈕。帶著摘要選中,單擊保存更改

默認情況下,一些主題將經過優化,以顯示摘錄,而不是我剛才概述的設置區域所指示的全文設置。我們的divi2.0主題就是一個很好的例子。

下面我有一個Divi主題的簡單安裝。我生成了一些假的內容,以顯示一個活躍的博客將如何使用我們的主題。你的可能看起來有點不同,特別是如果你使用的是不同的主題。

我喜歡這些帖子的樣子,但我想在每個帖子的末尾加上一個按鈕,就像你在自己的博客上看到的一樣。這使用戶清楚地知道,他們可以查看完整的帖子,但單擊“ReadMore”按鈕。

要做到這一點,我們需要深入研究我們網站的代碼。在代碼編輯器中打開活動主題。我使用的是崇高的文本2,Divi主題如下所示:

臺州高端網站設計的Divi2.0主題是在代碼編輯器中打開的。

我有index.php檔案打開。它的內部有一些代碼,可以輸出您在博客頁面上看到的內容。對于Divi主題,有相當多的正在進行,但基本的仍然在那里。我們想要集中注意力的部分如下:

修改the_content() 標簽

如果您從未接觸過divi內部的代碼,那么您可以在查看自己的代碼時參考行號。index.php檔案。這只適用于你們中使用Divi的人。行號50-57將是我們修改的。

讓我們將代碼更改為the_excerpt()而不是the_content(),以及自定義函數。

下面是更新的代碼塊。為了清晰和安全起見,我剛剛注釋掉了我們不使用的代碼。

在這里,我們將代碼更改為只包括the_excerpt()標簽

如果您保存您的更改,并返回到您的網站,您可能不會看到任何區別。我們仍然需要修改_excerpt()的默認功能。

我們需要在每個節選的末尾添加鏈接文本。為此,我們需要在一個名為functions.php。找到它并在代碼編輯器中打開它。

滾動到最底層并添加以下PHP代碼:

/* Modify the read more link on the_excerpt() */

function et_excerpt_length($length) {
    return 220;
}
add_filter('excerpt_length''et_excerpt_length');

/* Add a link  to the end of our excerpt contained in a div for styling purposes and to break to a new line on the page.*/

function et_excerpt_more($more) {
    global $post;
    return '<div class="view-full-post"><a href="'. get_permalink($post->ID) . '" class="view-full-post-btn">View Full Post</a></div>;';
}
add_filter('excerpt_more''et_excerpt_more');

上面的前4行形成了一個自定義函數來控制博客文章中每個節選中出現的字數。定義一個函數,然后添加一個過濾器來設置(執行)該函數。作為WordPress API的一部分,我們的目標是excerpt_length函數來優化我們的帖子,使其不超過220個字符。

第二個函數通過重寫WordPress默認值來定制ReadMore鏈接。在這里,我添加了一個包含在div中的鏈接,這樣我們就可以對它進行樣式設置。我會稍微講一下樣式設計,但是有了這段代碼,你可以直接去你的網站,希望能看到一些類似我的東西。

我們每個博客文章的摘錄都被我們的功能修改了。

鏈接和POST的默認CSS樣式是用我們的Divi2.0主題自動表示的,因此要使鏈接成為一個按鈕,只需要做一些工作。

我們給函數s.php文件中的錨鏈接提供了一個類view-full-post-btn。有了這個,我將添加一些CSS來鎖定鏈接。將下面的CSS添加到style.css文件在您的主題內,以自定義我們的鏈接。在哪里添加它并不重要,但是將它添加到一個可以在將來參考的值得記憶的領域總是明智的。

.view-full-post-btn{
  display:inline-block;
  /*border-radius*/
  -webkit-border-radius:10px;
     -moz-border-radius:10px;
          border-radius:10px;
  padding:8px 16px;
  margin-top:10px;
  color:#454545;
  border:1px solid #d8dcdc;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:16px;
}
.view-full-post-btn:hover{
  background:#454545;
  /*transition*/
  -webkit-transition:all .3s ease;
  -moz-transition:all .3s ease;
  -o-transition:all .3s ease;
          transition:all .3s ease;
  border:1px solid #000000;
  color:#FFFFFF;
}

在添加樣式后,我現在有一個非常漂亮的按鈕,具有倒掛狀態。

的默認狀態查看滿郵紐扣。

我們的懸停或活動狀態查看滿郵紐扣。

與其保持按鈕對齊,不如向前走一步,將其浮動到容器的右側。我們還需要在每個帖子中修改一些空白。將下面的代碼添加到style.css檔案。

.et_pb_post {
    margin-bottom100px;
    border-top1px solid #e1e1e1;
}
.et_pb_post:first-of-type {
    border-topnone;
}
.view-full-post { floatright; }

在所有這些樣式就位之后,您現在應該會看到一個功能齊全的最終結果。每個按鈕將點擊你的博客文章,讓你的用戶閱讀整個帖子。

我們的讀更多的標簽已經成功地實現了。

結語

添加諸如WordPress、ReadMore標記等增強功能,可以幫助用戶更輕松地瀏覽博客。在適當的情況下,保持信息的組織和總結將幫助你的博客比以往任何時候都更清晰。使用內置到WordPress中的摘錄功能是一個讓您的內容更易于理解的好方法。臺州高端網站設計只要付出一點努力,再加上一些造型,你就可以在幾乎沒有時間的時間內完成我在本教程中所介紹的內容。


上一篇:臺州公司網站設計:WordPress與Tumblr:比較兩個最流行的博客平臺下一篇:臺州網站開發公司:如何用WordPress確立自己的行業思想領袖地位