前言介紹
- 這款 WordPress 外掛「CSS Page Ancestors」是 2017-11-18 上架。
- 目前尚無安裝啟用數,是個很新的外掛。如有要安裝使用,建議多測試確保功能沒問題!
- 上一次更新是 2017-11-19,距離現在已有 2722 天。超過一年沒更新,安裝要確認版本是否可用。以及後續維護問題!
- 外掛最低要求 WordPress 3.3 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 5.6 以上。
- 尚未有人給過這款外掛評分。
- 還沒有人在論壇上發問,可能目前使用數不多,還沒有什麼大問題。
外掛協作開發者
giannisg |
外掛標籤
css | class | father | ancestor | ancestors |
內容簡介
請注意,此外掛程式目前處於 BETA 階段,我需要您的回饋(正面的或有建議的)來決定是否將其正式發佈。
這個外掛程式可以幫助您在 WordPress 網站中的所有祖先標籤中,添加您需要的額外樣式。
這樣,您可以根據某個頁面的根祖先來為網站的某個部分上色 — 不論該頁面有多深(而 WordPress 僅能為該頁面的直接父級標籤加上此類外掛程式)。
此外,產出的類名後綴為 ancestor-[slug] 和 ancestor-id-[id]。這樣,您可以使用該頁面的 slug(如果您在不同應用程式之間移動網站時,非常方便)和 id(如果您在非拉丁文語言的網站中,slug 無法用於 CSS,那麼 id 則會很有用)。
舉個例子:您在網站中擁有下列頁面樹結構:
首頁
客戶
網站
電子商店
作品集
印刷品
聯繫方式
現在假設您想要讓所有在「客戶」之下的頁面背景顯示為紅色。現在做到這個效果已經相對容易了 —— 但僅對於「網站」和「印刷品」之下的頁面才能適用,因為 WordPress 只會在 body 標籤中添加父級類名 — 此例中就是「客戶」的 ID。而「電子商店」和「作品集」頁面同樣也可以將背景顯示為紅色,但您需要在 CSS 樣式表中新增一個帶有「網站」ID 的新類名。如果您在「電子商店」頁面之下新增頁面,那麼您還需要再 CSS 樣式表中新增一個帶有「電子商店」ID 的新類名。如果您把網站管理權限轉移給一位不太熟悉 CSS 的其他用戶,那麼每次他們添加新頁面時,您都需要修改 CSS 樣式表。現在透過這個外掛,所有祖先標籤都會被添加到 body 標籤中作為類名,帶有 slug 和 ID。如果您想讓在「客戶」之下的所有頁面都顯示為紅色,那麼您只需要在 CSS 樣式表中新增 .achestor-clients{background:red;},這樣就可以搞定了,不用考慮頁面的深度。
最後,所有祖先標籤將按照從上至下的順序依次排列(以我們的範例來說,作品集頁面將顯示為 "ancestor-clients ancestor-web")。這樣,您就可以很方便地在 CSS 中針對具有不同祖先的樣式進行修改,甚至可以相互覆蓋。
此外,這個外掛程式沒有對數據庫或網站進行任何變更,因此即使出現了任何問題,也只需要停用這個外掛程式即可。
原文外掛簡介
Please, keep in mind that THIS IS IN BETA. I’m relying to your feedback, positive or with suggestions, to release it out of beta
This plugin will give you the extra class you need in your tag of ALL (and not just one) of the anchestors of a page in WordPress.
This way you will be able to color a certain section of a site, based on the root’s ancestor – no matter how deep is the page (WordPress does this only for the direct father of a page)
Also, the printed class names are ancestor-[slug] and ancestor-id-[id]. This way, you can use it with your page slug (very conviniate if you move sites between instalations where id can change) and id (useful if you use a non-latin site, and slug can’t be used in css)
–
So, let’s imagine you have this tree of pages on your site:
Home
Clients
Web
EShops
Portfolio
Contact
Let’s see this scenario: You want all the pages under ‘Clients’ to have a red background. Now, it’s easy to do that – but only for the ‘Web’, and ‘Print’ pages because WordPress gives you only the fathers in the body classes – in this case, the id of ‘Clients’. ‘Eshops’ and ‘Portfolio’ can also have a red background, but you will have to add a new class in your css with the id of ‘Web’ at your css. And, if you add pages under ‘Eshops’, same thing, you will have to add a new class in your css file with the id of ‘Eshops’ page. So, all this is easy if you do it yourself – but if you handle the site to an editor, that knows only to create content – you will have to add the class in the CSS every time someone adds a level to all this.
With this plugin all the ancestors of a page, no matter the depth will be in your body as class names – as a slug, and as an id. And you want all the pages under ‘Clients’ to have a red background you just add to your css .achestor-clients {background:red;} in your css, and you are done – no matter the level the final page is under.
Finaly, the order is with top ancestor first (in our example, Portfolio page will have “ancestor-clients ancestor-web”) – this way, it’s simpler in CSS to overwrite the -clients class with the -web attributes.
There is no writing on the database, or other change on the site, so, even if something goes wrong, just de-activate the plugin, and you’ll be fine.
各版本下載點
- 方法一:點下方版本號的連結下載 ZIP 檔案後,登入網站後台左側選單「外掛」的「安裝外掛」,然後選擇上方的「上傳外掛」,把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二:透過「安裝外掛」的畫面右方搜尋功能,搜尋外掛名稱「CSS Page Ancestors」來進行安裝。
(建議使用方法二,確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛(你可能也想知道)
Rootspersona 》, 自版本 3.7.0,Rootspersona 需要 PHP5.6 或更高版本。, 詳細的更新內容可在 Changelog 中查看!, , Rootspersona 會使用從一個或多個 GEDCOM 檔案匯入的資...。
GedShow 》GedShow 是一個簡單的 WordPress 外掛程式,允許將 GEDCOM 文件上傳到 WordPress 網站。安裝插件後,在網站管理員選單面板中會出現一個名為 Gedshow 的新選單...。