在WordPress中更改特色圖片、解決編輯頁面問題、建立導航列及搜尋框

在WordPress中更改特色圖片、解決編輯頁面問題、建立導航列及搜尋框

編輯日期：2024/10/15

文章目錄

1.如何在WordPress中更改頁面預設的特色圖片顯示方式

2.解決WordPress編輯頁面中找不到右側工具欄的問題

3.在WordPress中自訂網站首頁：如何建立導航列

4.如何在WordPress導航列中加入搜尋框功能

 

 

 

一、在WordPress如何更改頁面在前台顯示預設的特色圖片

在WordPress中更改頁面在前台顯示的第一張圖片，通常是指更改「特色圖片」（Featured Image）。這是用來代表頁面或文章的圖片，通常會顯示在主頁、文章列表或文章的最上方。以下是更改「特色圖片」的步驟：

(一)登入WordPress後台：

登入你的WordPress網站，進入網站的管理後台。

 

(二)進入要更改的頁面或文章：

從左側導航欄中，選擇「頁面」或「文章」，然後找到你要修改的頁面或文章，點擊進行編輯。

 

(三)更改或設置「特色圖片」：

1.  在編輯頁面中，先選設定(一本書)，再向右側的工具欄（側邊欄）滾動，找到「特色圖片」（Featured Image）選項。

2.  如果已經有圖片，點擊「更改特色圖片」或「移除特色圖片」來刪除現有的圖片。

3.  點擊「設置特色圖片」（Set Featured Image）來選擇一張新的圖片。

4.  系統會彈出一個「媒體庫」窗口，你可以從中選擇已有的圖片或上傳一張新的圖片。

 

(四)更新頁面或文章：

1.  設置好圖片後，點擊「更新」（Update）按鈕來保存更改。這樣前台顯示的第一張圖片就會更新為你設置的「特色圖片」。

2.  如果你使用的是自訂佈景主題，或者有一些進階的設定，你可能需要確認佈景主題的設定是否有影響圖片顯示的位置和大小。

 

 

二、在WordPress編輯頁面中為何找不到頁面右側的工具欄

如果在WordPress的頁面編輯器中找不到右側的工具欄，可能是由於編輯器的設定或頁面佈局的問題。這裡有幾個可能的原因及解決方法，試著按照以上步驟操作，看看是否能夠恢復右側工具欄。

(一)確保「文件」選項卡已啟用

當你編輯頁面時，右側工具欄有兩個主要選項：「區塊」和「文件」：

1.  點擊編輯器右上角的齒輪圖示（⚙️），這樣可以打開或關閉右側工具欄。

2.  確認選中的是「文件」（Document）選項，而不是「區塊」（Block），這樣你可以看到整個頁面或文章的設置，包括「特色圖片」的選項。

 

(二)檢查頁面是否進入「全螢幕模式」

如果右側工具欄仍然無法顯示，檢查是否開啟了「全螢幕模式」：

1.  點擊右上角的三個縱向點的「更多選項」按鈕（三個垂直點）。

2.  如果開啟了「全螢幕模式」，取消勾選這個選項，這樣可以恢復右側的工具欄顯示。

 

(三)主題或插件衝突

某些主題或插件可能會影響WordPress編輯器的外觀和功能。可以試著停用一些最近安裝的插件，然後查看右側工具欄是否恢復。

 

(四)切換至經典編輯器

1.  如果你使用的是WordPress的區塊編輯器（Gutenberg），你可以考慮切換回經典編輯器。

2.  安裝並啟用「Classic Editor」插件，這樣可以使用傳統的編輯界面，右側工具欄可能會更容易找到。

 

(五)瀏覽器問題

有時候瀏覽器的暫存問題也會導致介面顯示異常，可以嘗試清除瀏覽器的快取，或使用不同的瀏覽器來查看是否能解決問題。

 

 

三、在WordPress自訂網站首頁中如何建立導航列

在WordPress中自訂網站首頁，並建立導航列的步驟如下，完成以下步驟後，您的網站首頁就會有一個功能性的導航列，方便用戶瀏覽其他頁面！如果有其他問題或需要更詳細的說明，隨時告訴我！

(一)登入WordPress後台

首先使用您的帳號登入WordPress後台。

 

(二)創建頁面

如果您尚未創建首頁和其他頁面，可以依照以下步驟：

1.  前往「頁面」->「新增」，創建一個新的首頁（例如「首頁」）。

2.  同樣地，創建其他需要的頁面，例如：「關於我們」、「聯絡我們」等。

 

(三)設定首頁

1.  前往「設定」->「閱讀」。

2.  在「首頁顯示」選項中，選擇「靜態頁面」並在下拉選單中選擇剛剛創建的首頁。

 

(四)建立導航列

1.  前往「外觀」->「菜單」。

2.  點擊「建立新菜單」，輸入菜單名稱（例如「主導航」），然後點擊「建立菜單」。

3.  在左側的頁面區域，選擇您想要加入導航列的頁面，然後點擊「加入菜單」。

4.  拖動頁面來調整順序，並可設置子菜單（將子項目拖動到主菜單項目下方）。

5.  設定完成後，選擇這個菜單的位置（通常是「主導航」或「主要菜單」）。

6.  點擊「儲存菜單」。

 

(五)自訂樣式（可選）

如果您需要進一步自訂導航列的外觀，您可以透過「外觀」->「自訂」，找到相應的選項來調整顏色、字型等。

 

(六)預覽與發布

預覽您的網站，確認導航列的顯示是否符合您的需求，然後發佈即可。

 

 

四、在自訂網站首頁的導航列，如何建立搜尋框

    在自訂網站的首頁導航列中添加搜尋框，你可以通過手動編輯HTML和CSS或使用WordPress等CMS的插件來完成。以下是兩種方法來建立搜尋框：

(一)手動編輯HTML和CSS

如果你正在建立自訂網站並且能修改網站的原始碼，以下是將搜尋框添加到導航列的基本步驟：

 

HTML程式碼：

在網站的導航列中，你可以將以下HTML程式碼添加到你希望顯示搜索框的位置：

```html

<nav>

<!-其他導航連結 -->

<ul>

<li><a href="">首頁</a></li>

<li><a href="">關於我們</a></li>

<li><a href="">服務</a></li>

<li><a href="">聯繫我們</a></li>

</ul>

 

<!-搜尋框 -->

<form action="/search" method="GET" class="search-form">

<input type="text" name="query" placeholder="搜尋..." class="search-input">

<button type="submit" class="search-button">搜尋</button>

</form>

</nav>

```

 

CSS程式碼：

接下來，你可以用一些基本的 CSS 來設置搜索框的外觀，使其與導航列整合：

```css

/* 導航列設置 */

nav {

display: flex;

justify-content: space-between;

align-items: center;

}

 

/* 搜尋表單設置 */

.search-form {

display: flex;

}

 

.search-input {

padding: 5px;

font-size: 16px;

border: 1px solid ccc;

border-radius: 4px;

}

 

.search-button {

padding: 5px 10px;

background-color: 4CAF50;

color: white;

border: none;

border-radius: 4px;

cursor: pointer;

}

 

.search-button:hover {

background-color: 45a049;

}

```

 

這樣的設定將顯示一個簡單的搜索框在導航列中，並且能夠正常運作。如果你需要將搜尋結果導向某個特定的頁面，請確保在`action`屬性中指定正確的搜尋頁面網址。

 

(二)使用WordPress或CMS插件

如果你使用的是WordPress或其他CMS系統，添加搜索框會更加簡單，無需編寫程式碼。

 

在WordPress中添加搜索框：

1.  進入WordPress管理後台，選擇外觀 →小工具。

2.  在可用的小工具列表中找到搜尋小工具。

3.  將搜尋 小工具拖到「導航列」或「標題」區域，具體取決於主題允許的區域。

4.  儲存並檢查網站的首頁，你應該會看到導航列中出現了搜索框。

 

使用WordPress插件：

如果你想要更強大的搜尋功能，可以使用一些搜尋相關的插件，例如：

Relevanssi：提供更好的搜尋結果和高級功能。

Ajax Search Lite：提供即時搜尋結果的選項。

這些插件不僅能讓你更方便地添加搜索框，還能提升搜尋的精準度與效果。

 

(三)綜合總結

1.  如果你使用自訂的HTML網站，可以手動編寫HTML和CSS，將搜索框嵌入導航列中。

2.  如果你使用WordPress或其他CMS系統，可以通過內建的小工具或安裝插件來實現這一功能。