前言介紹
- 這款 WordPress 外掛「Header Customizer Lite」是 2016-03-23 上架。
- 目前有 100 個安裝啟用數。
- 上一次更新是 2016-03-25，距離現在已有 3329 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 4.2.2 以上版本才可以安裝。
- 尚未有人給過這款外掛評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
markzero |
外掛標籤
header | customize | Customizer API | header options |
內容簡介
Header Customizer Lite 是一款 WordPress 外掛，可讓您即時預覽修改標頭。只有在設定滿意後，您才能安全地保存和發布它。這份文件旨在幫助您設置和充分利用您的標頭。
使用此外掛，您可以完全自定義自己的標頭。
其目的在於使您的網站更有用，更易於使用，並改善一般的外觀和感覺，甚至在窄屏上也是如此。
您可以使用 WordPress Customizer API 視覺地修改您的標頭，同時查看您的網站。
只需在 標籤下方插入以下代碼即可：
這就是所有需要做的了。您只需啟用外掛並轉到外觀->自訂-> Header Customizer Lite 部分，即可開始修改您的標題。
您將能夠在修改標題時透過 Header Customizer Lite 看到更改！
如果您想要粘性標題、更多菜單、面包屑、搜索框，或者僅僅是更多設置，同時實時預覽它們，您可以考慮非 Lite 或 PRO 版本的 WordPress Header Customizer。
通用設置：
此面板包含以下設置：
標頭寬度 - 標頭內容的寬度
拉伸標頭寬度？ - 標頭包裝器是否應拉伸整個瀏覽器的寬度？
標頭左側位置 - 如果您的標題是粘性的，且不希望標題水平居中，則應使用此選項
頂部邊距
底部邊距
左邊距
右邊距
谷歌字體 - 選擇標頭的字體；有更具體的字體選項（例如僅用於標誌區域），但這是一次性調整整個標題的字體
自定義 CSS - 可以在此處鍵入任何 CSS；確保以“.hc-wrap {”開始您的 CSS 定義，以免搞亂其他網站的 CSS 定義
標頭：
中間標頭是 Header Customizer 中包含標誌區域（標誌和說明）和主菜單（帶有子菜單）的部分。您可以自定義以下內容：
標頭類型 - 您的標誌和菜單的排列方式；默認情況下，標誌位於左側，而主菜單位於標頭的右側；您可以將它們都設置為中央對齊，或將菜單移動到標誌旁邊的左側
背景顏色 - 中間標頭的背景顏色，通過顏色選取器選擇顏色透明度的實心顏色
背景圖像 - 中間標頭的背景圖像（覆蓋背景顏色）
背景圖像重複 - 中間標頭的背景圖像（覆蓋背景顏色）
背景圖像附加 - 背景附加屬性設置背景圖像是否固定或與頁面的其餘部分一起滾動；例如，如果設置為“固定”，則非常適合設置視差效果
背景圖像位置 - 背景位置屬性設置背景圖像開始的位置
背景圖像大小 - 背景大小屬性指定背景圖像的大小
填充（頂部/底部） - 中間標頭的填充，因此您可以適應其內容。
原文外掛簡介
Header Customizer Lite is a WordPress plugin which enables you to modify your
header by live previewing it at the same time. Only after you are happy
with your settings, you can save and publish it safely. This
Documentation is intended to help you configure and get the most of your Header.
With this plugin you replace your header entirely with your own customizable header.
It’s purpose is to make your website more useful, user friendly and to
improve the general look and feel, even on narrow screens.
You can modify your header visually using WordPress Customizer
API,
which enables you to make changes to the header while looking at your
website at the same time.
Simply insert following code right below
And that’s it. All you need to do is to activate your plugin and go to Appearance -> Customize -> Header Customizer Lite section, to start modifying your header.
You’ll be able to see changes while modifying your header through Header Customizer Lite!
If you want sticky header, more menus, breadcrumbs, search box, or simply much more settings, while live previewing them all, you may consider non-lite or PRO version WordPress Header Customizer.
General Settings
This panel contains following settings:
Header width – width of the header content
Stretch header width? – should header wrapper stretch the whole width of a browser?
Header left position – if your header is sticky, you should use this option if you don’t want header to be horizontally on the center
Margin top
Margin bottom
Margin left
Margin right
Google Font – choose font for the header; there are more specific options for fonts (e.g. only for logo area) but this is for the whole header at once
Custom CSS – you can type any CSS here; make sure to start your CSS definitions with “.hc-wrap {” so you don’t mess with other website’s CSS definitions
Header
Middle Header is section of Header Customizer which contains logo area
(logo & description) and main menu (with submenus). You can customize
following:
Header type – how are your logo and menus placed; by default logo goes on the left side, while main menu goes to the right side of the header; you can set them both centrally aligned, or move menu to the left next to the logo
Background color – background color of middle header, solid color with transparency set optionally through color picker
Background image – background image of middle header (overrides background color)
Background image repeat – background image of middle header (overrides background color)
Background image attachment – the background-attachment property sets whether a background image is fixed or scrolls with the rest of the page; it’s great to set parallax effect for example if set to “fixed”
Background image position – the background-position property sets the starting position of a background image
Background image size – the background-size property specifies the size of the background images
Padding (top/bottom) – padding of middle header so you can fit vertically your menu or logo nicely
Padding (left/right) – padding of middle header so you can set the distance of inner content from left or right side of the screen
Border top (and bottom, left, right) color – not visible until border width is set to at least 1 (one) pixel (px)
Border top (and bottom, left, right) width – width of the border
Top left (and bottom left, top right, bottom right) radius – border radius of the middle header
Logo Area
Logo area is part of your header which contains logo (as text or image
link) and site description. Following are the settings you can modify:
Logo image – image as your logo
Logo type – set type of your logo: link image or link text
Logo text – site title by default
Maximum width – it’s useful not to stretch when header goes responsive
Padding (top/bottom) – top and bottom paddings; play around to set it vertically nicely against main menu
Google font family – for textual logo only
Google font family for description – for description only
Show logo area? – yes or no (checkbox); if you need to remove logo area completely
Show logo? – yes or no (checkbox); if you need to remove logo only
Show logo description? – yes or no (checkbox); if you need to remove description (tagline) only
Site title color (and hover color) – if your logo is textual, set it’s color here
Site description color – color of logo description (tagline)
Site title font size – font size for textual logo
Site description font size – font size for description (tagline)
Main Menu
Main menu is part of header which is placed inside Header
alongside with logo area. It’s submenus are placed within Main Submenus section. Following are the settings you can modify:
Link color (and hover color, active color) – these options are only for link ( tags) colors; active color is color of a link when on current page
Font size – font size of menu items
Google font family – font family of menu items
Show submenu arrows? – checkbox; show arrow pointing down for menu items which have submenus
Menu margin left (and right) – margin left and right of the whole menu (not menu items!)
Link background color (and hover and active background colors) – only for links
Link border radius – only for links, so they can be “rounded”
Menu item background colors (and hover, active background colors) – for list items (
Menu items padding (top/bottom) – list tag paddings, so you can align with logo area nicely
Menu items padding (left/right)
Menu items margin (top/bottom)
Menu items margin (left/right)
Menu links padding (top/bottom) – for links ( tags)
Menu links padding (left/right) – same
Menu item border top (and bottom, left, right) color – border colors for list items
Menu item border top (and bottom, left, right) width – border width
Menu item top-left (and top-right, bottom-left, bottom-right) radius – each of these options have possibility to exclude all other items except first or last item, so the whole menu looks “rounded” (take a look at the gif example below!)
To setup main menu, first you need to set any menu you have saved before
to be placed to “HC Main Menu” location.
Main Submenus
Submenus appear on hover or click on main menu items. There are up to
four levels of submenus to choose how deep submenus will go. Many more
options are here, so let’s list them below:
Submenus depth – like stated previously, you can choose how many levels of submenus you’ve got
Show submenu on mouse hover? – whether to click or hover main menu items or submenu items in order to show submenus; responsive header will always react on tap (click)
Background color – background color of all submenus
Min. width – minimum width that your submenus take; by default it’s set to auto
Font size – font size of all submenu items
Border color – border color of all four sides of one submenu column: top, bottom, left, right
Border top (and bottom, left, right) width – four separate options for borders’ width
Menu items border top (and bottom) color – border color of submenu links (except first one, or last one if it’s bottom color)
Menu items border top (and bottom) width – border width of submenu links (except first one, or last one if it’s bottom width)
Shadow – shadow set using CSS property box-shadow; it’s set in text field using full definition, e.g. 2px 2px 2px 2px rgba(85, 85, 85, 0.8) and when you make changes to any of the values you can see them live as you type
Responsive Header
Responsive header appears when your screen size (which you can also set)
is small enough for your header so it transforms making it appealing for
your phone or tablet. You can set following options:
Responsive Width – width which defines breaking point between desktop and responsive header; when you load your website on screen sizes below this point your header will look “minified”
Hamburger Color – “hamburger” icon appears instead of your main menu, which you can click on to show the menu on small screens but this time the menu items are ordered below each other
Uninstalling
You can find uninstall (delete) option after you deactivate the plugin
from the Plugins page. Keep in mind that when you delete Header
Customizer Lite you will also delete all of its color, menu and any other
settings. If you only deactivate the plugin, its settings will remain
and will not need to be entered again if plugin is re-activated.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Header Customizer Lite」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
WPCode – Insert Headers and Footers + Custom Code Snippets – WordPress Code Manager 》插入標頭和頁腳 + 完整的 WordPress 代碼片段外掛, WPCode (前稱为 WPBeginner 的 "插入標頭和頁腳"）是使用率超过 100 万个网站的 WordPress 代码片段外掛中...。
Header Footer Code Manager 》Header Footer Code Manager by 99 Robots 是一個簡易的介面，可將片段添加到頁面的標頭或頁腳或內容上方或下方。, 優點, , 無需擔心因添加代碼而不小心使網...。
Sticky Header Effects for Elementor 》Sticky Header Effects for Elementor 是一個插件，為 Elementor Pro 2.0 中引入的「sticky」標題特性添加了實用選項。當訪客開始向下滾動頁面時，它為用戶提...。
Head, Footer and Post Injections 》關於 WordPress SEO 和 Facebook Open Graph：我對 Yoast 的邀請讓我刪除我的外掛非常不滿，但實際上並不需要。, 點擊此處了解更多。, 頁首和頁尾代碼, 為什...。
Insert Headers And Footers 》WP Headers and Footers 外掛程式可以協助您在 WordPress 網站的頁首和頁尾中插入程式碼，例如 Google Analytics 追蹤碼、Facebook 像素碼、Google Optimize ...。
Header and Footer Scripts 》如果您正在運行 WordPress 網站，早晚都需要將某種代碼插入到您的網站上。最有可能的是網頁分析代碼，例如 Google Analytics，或者是社交媒體腳本、某些 CSS ...。
Woody code snippets – Insert Header Footer Code, AdSense Ads 》需要專業的支援嗎？, 免費獲取支援, 開始獲得高級支援, , 停止反覆使用相同的內容！, 停止插入 function.php 中的 PHP 代碼！, 停止將 Google Analytics、Yan...。
Slim SEO – Fast & Automated WordPress SEO Plugin 》ne-click, Robots.txt Editor: edit your robots.txt file easily without any technical knowledge, Backlinks: monitor backlinks and broken links, Autom...。
Nimble Page Builder 》Nimble Page Builder 是什麼？, Nimble Page Builder 是一個針對 WordPress 的快速靈活的頁面建構外掛。Nimble Builder 使用 WordPress 原生、強大的介面以即...。
Unique Headers 》特點, Unique Headers Plugin 從文章/頁面編輯畫面中新增一個自訂標頭圖像框。你可以使用這個框來上傳該文章的獨特標頭圖像，或使用你的 WordPress 媒體庫中...。
SOGO Add Script to Individual Pages Header Footer 》已經在 Gutenberg 上進行測試, 創建一個簡單的方式，為個別頁面、文章或自訂文章類型的標題和頁腳添加 JavaScript 代碼，, 例如: 在感謝頁面上添加轉換代碼, ...。
Oceanwp sticky header 》簡單易用的固定標題安裝, 啟用外掛後，固定標題就會立即開始運作。, 如何停用固定標題？, 您可以從設置頁面中的管理員選單下方的「外掛」中停用外掛。, 是否...。
Head Meta Data 》一款外掛，可通過添加自定義的 標籤到網頁的 部分，提高網頁定義和語義質量。, 基本示例, 在您的網站上顯示任何自定義的 meta 標...。
Easy WP Meta Description 》這個外掛讓使用者為每篇文章、頁面、首頁或自訂文章類型的文章編寫獨立的描述，這些描述會作為 meta 描述加入到 HTML 的 head 中。, 每篇文章或頁面的獨立描...。
WP Display Header 》這個 WordPress 外掛可以讓你針對每個文章、頁面、自訂文章類型，以及封存頁面，選擇個別的標頭圖片，可以從預設的標頭照片和自訂標頭照片中做選擇。, , 外掛...。