首頁 > 軟體教學 > 辦公室軟體 > WordPress上如何建立一個相冊,無需使用插件

WordPress上如何建立一個相冊,無需使用插件

王林
發布: 2024-01-20 08:15:10
轉載
650 人瀏覽過

WordPress上如何建立一個相冊,無需使用插件

如何不用外掛程式在WordPress上建立一個相簿

通常,人們會使用像NextGen Gallery這樣的外掛來實現這種效果。除了使用第三方外掛外,還可以利用WordPress自帶的功能來達到相同的效果。但在此之前,我們需要對WordPress和HTML/CSS有一定的了解。

相簿最終效果

在開始之前,讓我們先確定一下最終的效果:

使用者點擊相簿頁面時,頁面以網格狀展示不同的封面以表示不同月份的相簿。我們每個月會創建一個相冊,當月所有照片都會包含在其中。

如果使用者點擊相簿封面,就會看到一個相簿的專屬頁面,在那裡你可以寫一點背景信息,同時把這個相簿裡的所有照片都列出來。

如果使用者點擊單張照片,就可以去到每張照片各自的頁面,在那裡他們可以看到每張照片的標題,拍攝者的信息和相關連結。

如果整個網站就是用來展示相冊,那麼大家可以使用預設格式的post。但要是你還有個博客,那麼這時就需要用自訂的post類型了。

讓我們來創建一個相簿吧

首先你要建立一個網站專屬外掛(甚至是專案專屬外掛程式)。

如果你要用自訂的post,那你應該產生一個程式碼,再把它貼到網站專門的插件中去。

為了製造網格效果,接下來你需要在WordPress中設定一下附加圖像的尺寸。

例如:設完圖像尺寸之後,我們也要為媒體上傳目錄新增欄位。這樣你就可以在上傳每個影像的時候加上攝影者的名字和他們的URL了。

一旦做完這一步,我們就可以繼續加入相簿了。把所有你想要加到相簿裡的圖上傳上去。然後再附上一張不同的照片封面,把它設為主圖。大家可以在post的內容欄裡寫上背景資訊。

既然大家已經在後台加好了幾個相冊,我們就可以加上程式碼讓它運作了。假設你的自訂post類型叫做albums,那麼你就會新建一個叫做archive-albums.php.的範本資料夾。貼上你想要的程式頭和尾,側邊欄和其他設計元素,然後新建一個post loop。

在那個PL中,我們將會列出同個post中的所有附件,但不包含超連結到單一頁面的縮圖。

我們也會分別加上主post縮圖(即相簿封面),再把它超連結到單一的post頁面上去(即相簿頁面)。

我們打算用清單的方法來製作網格圖像。這段程序是這樣的:

對於主要的CSS風格,大家真正要考慮的問題是相簿網格分類這樣我們就可以把每張圖片都放在網格中合適的位置,以達到我們想要的風格了。

接下來大家需要新建一個單一附件的範本。這將會是今後用戶看到的頁面,以便他們可以看到每一個圖像。用戶會在這裡看到圖像的標題,攝影者的名字和他們的連結。大家可以隨意調整自己喜歡的單一模板。

現在還有最後一件事要做,還是假設你的自訂post類型叫做album,你需要新建一個single-albums.php文件,把所有程式頭、尾,工具列或其他你想要的設計元素都複製一下。

在loop元素裡做一些和存檔相簿模板裡基本上同樣的處理。不過在加入主圖像和附件之前,你還需要加上相簿標題和描述。這一步透過加入程式碼就可以完成了,像這樣:

好了!大功告成!

wordpress怎麼做頁面偽靜態

WordPress會自動產生真實存在的靜態頁面設定方法:

方法很簡單只需要下載安裝一個名為cos-html-cache的wordpress外掛。

COS-HTML-Cache是​​一個非常有效的WordPress頁面快取插件,使WordPress網站回應速度更快。基於URL重寫,該外掛程式將自動產生真正的HTML文件,當有使用者或搜尋引擎蜘蛛來存取你的偽靜態頁面時,該外掛程式會自動更新HTML文件及其相關的文章修改。

可以在wordpress後台選擇插件>安裝插件,輸入cos-html-cache然後搜尋安裝,最後在啟用即可。或到wordpress網站下載cos-html-cache壓縮包,解壓縮後用FTP上傳到/wp-content/plugins/目錄下面,然後在背景啟用。

外掛程式安裝成功生效以後,並不會馬上產生html靜態文件,當下次使用者進入或有蜘蛛造訪的情況下,它才會自動產生或更新html文件。如果想快速產生html檔案看下效果,可以使用站長工具裡面的死連結偵測,並模仿蜘蛛來存取自己的網站即可。

以上是WordPress上如何建立一個相冊,無需使用插件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:docexcel.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板