[WordPress] 外掛分享： WP247 Body Classes

前言介紹

  • 這款 WordPress 外掛「WP247 Body Classes」是 2015-03-01 上架。
  • 目前有 300 個安裝啟用數。
  • 上一次更新是 2024-05-24，距離現在已有 344 天。
  • 外掛最低要求 WordPress 4.0 以上版本才可以安裝。
  • 有 6 人給過評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

wescleveland |

外掛標籤

mobile | scroll | post type | user roles | user capabilities |

內容簡介

為了基於文章屬性（文章類型、slug 和 ID）和各種 WordPress 的「is」函數進行簡單的樣式設置，在 body 標籤中添加獨特的類：

wp_is_mobile()
is_home()
is_front_page()
is_blog()
is_admin()
is_admin_bar_showing()
is_404()
is_super_admin()
is_user_logged_in()
is_search()
is_archive()
is_author()
is_category()
is_tag()
is_tax()
is_date()
is_year()
is_month()
is_day()
is_time()
is_single()
is_sticky()
$post->post_type
$post->name
$post->ID
wp_get_post_categories()（頁面/文章類別）
wp_get_post_tags()（頁面/文章標籤）
$user->nicename
$user->id
$user->roles
$user->allcaps
$archive->slug（例如類別 slug、標籤 slug 等）
$archive->id（例如類別 ID、標籤 ID 等）

在文章編輯器中，為 body 標籤添加特定文章的類。使用任何您想要的類名來獨特地設置單個文章或一組文章的風格。

根據使用者捲動頁面，添加基於類的樣式。您可以檢查以下內容：

is-scroll-top（在頁面頂部 - 是 is-not-scroll 的同義詞）
is-not-scroll-top（不在頁面頂部 - 是 is-scroll 的同義詞）
is-scroll（不在頁面頂部 - 是 is-not-scroll-top 的同義詞）
is-not-scroll（在頁面頂部 - 是 is-scroll-top 的同義詞）
is-scroll-top-px（沒有到達像素值的滾動開始值）
is-scroll-top-vh（沒有到達視口高度的滾動開始值）
is-scroll-top-dh（沒有到達文檔高度的滾動開始值）
is-scroll-10-px（向下滾動了10像素）
is-scroll-8-vh（向下滾動了視口高度的 8%）
is-scroll-5-dh（向下滾動了文件高度的 5%）
is-scroll-mid-px（已到達像素滾動開始值但未到達滾動限制）
is-scroll-mid-vh（已到達視口高度的捲動開始值，但未到達捲動限制）
is-scroll-mid-vh（已到達文檔高度的捲動開始值，但未到達捲動限制）
is-scroll-max-px（已達到像素的捲動限制）
is-scroll-max-vh（已達到視口高度的捲動限制）
is-scroll-max-dh（已達到文檔高度的捲動限制）

基於 mobiledetect.net 的 Mobile_Detect 腳本的結果，添加基於類的樣式。這個腳本解析瀏覽器在 HTTP_USER_AGENT 字串中傳遞的值。因此，移動檢測更多的是一門藝術而不是科學，不幸的是不完美。您可以檢查以下內容：

is-mobile
is-tablet
is-phone
移動操作系統
移動瀏覽器
平板電腦類型
手機類型

此外掛程式會在 HTML body 標籤中添加類別，用於指示以下內容：

訪問設備是否為移動設備（.is-mobile 或 .is-not-mobile）

...

原文外掛簡介

Add unique classes to the body tag for easy styling based on post attributes (post type, slug, and ID) and various WordPress “is” functions:

wp_is_mobile()
is_home()
is_front_page()
is_blog()
is_admin()
is_admin_bar_showing()
is_404()
is_super_admin()
is_user_logged_in()
is_search()
is_archive()
is_author()
is_category()
is_tag()
is_tax()
is_date()
is_year()
is_month()
is_day()
is_time()
is_single()
is_sticky()
$post->post_type
$post->name
$post->ID
wp_get_post_categories() (Page/Post Categories)
wp_get_post_tags() (Page/Post Tags)
$user->nicename
$user->id
$user->roles
$user->allcaps
$archive->slug (e.g. Category slug, Tag slug, etc.)
$archive->id (e.g. Category id, Tag id, etc.)

Add post specific classes to the body tag in the post editor. Use any class name you want to uniquely style an individual post or a set of posts.
Add classes based on user scrolling through the page. You can check things like:

is-scroll-top (at the top of the page – synonym for is-not-scroll)
is-not-scroll-top (not at the top of the page – synonym for is-scroll)
is-scroll (not at the top of the page – synonym for is-not-scroll-top)
is-not-scroll (at the top of the page – synonym for is-scroll-top)
is-scroll-top-px (has not reached the scroll start value for scroll measurement by pixels)
is-scroll-top-vh (has not reached the scroll start value for scroll measurement by viewport height)
is-scroll-top-dh (has not reached the scroll start value for scroll measurement by document height)
is-scroll-10-px (scrolled down 10 pixels)
is-scroll-8-vh (scrolled down 8% of the viewport height)
is-scroll-5-dh (scrolled down 5% of the document height)
is-scroll-mid-px (has reached the scroll start value but not the scroll limit for scroll measurement by pixels)
is-scroll-mid-vh (has reached the scroll start value but not the scroll limit for scroll measurement by viewport height)
is-scroll-mid-vh (has reached the scroll start value but not the scroll limit for scroll measurement by document height)
is-scroll-max-px (has reached the scroll limit for scroll measurement by pixels)
is-scroll-max-vh (has reached the scroll limit for scroll measurement by percent of viewport height)
is-scroll-max-dh (has reached the scroll limit for scroll measurement by percent of document height)

Add classes based on the results from mobiledetect.net’s Mobile_Detect script. This script parses the value passed by the browser in the HTTP_USER_AGENT string. Consequently, mobile detection is more of an art than a science and, unfortunately, is not perfect. You can check things like:

is-mobile
is-tablet
is-phone
Mobile Operating System
Mobile Browser
Type of tablet
Type of phone

This plugin adds classes to the html body tag indicating:

whether or not the requesting device is a mobile device (.is-mobile or .is-not-mobile)

the type of post being viewed (.is-? where ? is the post type (page, post, whetever special post types are defined) ).
E.g. .is-page or .is-post

the slug of the post being viewed (.is-?-! where ? is the post type and ! is the post slug).
E.g. a post with slug “hello-world’ would have class .is-post-hello-world

the ID of the post being viewed (.is-?-# where ? is the post type and # is the post ID).
E.g. a post with ID “1” would have class .is-page-1

whether or not the requested page shows archived results (.is-archive or .is-not-archive)
If the page being displayed is an archive

the type of archive being viewed (.is-? where ? represents the type of archive (author, category, date, tag) )
E.g. .is-author

the slug of the archive being viewed (.is-?-! where ? is the archive type and ! is the archive slug)
E.g. a category with slug “uncategorized’ would have class .is-category-uncategorized

the ID of the archive being viewed (.is-?-# where ? is the archive type and # is the archive ID)
E.g. a category with ID “1” would have class .is-category-1

How far down the page the viewer has scrolled in pixels or as a percentage of viewport height or as a percentage of document height

Post specific class(es) that are set in the post editor

Use these classes in your styling to provide a better browsing experience for your viewers.
Custom Body Classes
Create your own Custom Body Classes by adding your PHP code in the “Custom Body Classes” section.
Here’s an example. Not sure why we would want to do it, but suppose we want to do some custom styling when the page is being displayed to someone that can manage WordPress options. We might enter something like:
if (current_user_can('manage_options')) $classes[] = 'user-can-manage-options';

Then we can use the body.user-can-manage-options qualifier in our CSS styling.
Example
Suppose you have a large h1 top margin that you want to eliminate on mobile devices to avoid a lot of white space. After activating the wp247-body-classes plugin and indicating that the .is-mobile class is desired, all you need to do is add this line to your CSS:
body.is-mobile h1 {
margin-top: 0;
}
Suppose you have a sticky header but want to shrink it by dynamically reducing the top and bottom padding from 25px to 5px as the viewer scrolls down the page based on 20 pixel scroll increments up to 80 pixels of scrolling:
Set WP247 Body Classes Scroll setting to “Scroll by Pixel” with a 10 pixel increment and an 80 pixel limit and then add the following to your CSS:
body.is-scroll-20-px header {
padding-top: 20px;
padding-bottom: 20px;
}
body.is-scroll-40-px header {
padding-top: 15px;
padding-bottom: 15px;
}
body.is-scroll-60-px header {
padding-top: 10px;
padding-bottom: 10px;
}
body.is-scroll-max-px header {
padding-top: 5px;
padding-bottom: 5px;
}

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「WP247 Body Classes」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.0 | 1.1 | 2.0 | 2.1 | 1.0.1 | 1.0.3 | 1.1.1 | 1.1.2 | 1.1.3 | 2.0.1 | 2.1.1 | 2.1.2 | 2.2.0 | 2.2.1 | trunk |

延伸相關外掛（你可能也想知道）

  • AMP 》「Page Experience」（PX）是一組排名訊號，包括「核心網頁素質」（Core Web Vitals，CWV），用來測量使用者與網頁互動的使用體驗。AMP 是一個強大的工具，能...。
  • Responsive Menu – Create Mobile-Friendly Menu 》這是一個高度自訂化的 WordPress 響應式選單外掛程式，擁有超過150個可自訂選項，讓您擁有22,500種組合選擇！您不需要編寫代碼或知識，只需使用簡單易用的介...。
  • WP Mobile Menu – The Mobile-Friendly Responsive Menu 》需要一個專門的手機網站體驗嗎？需要一個能讓您的手機訪客參與的手機菜單外掛嗎？, , WP Mobile Menu是最優秀的WordPress響應式手機菜單。使用任何設備（智能...。
  • WPtouch – Make your WordPress Website Mobile-Friendly 》WPtouch是一個 WordPress 插件，為您的 WordPress 網站自動添加一個簡單而優雅的行動版主題，以迎接行動訪客。建議您使用 Google 推薦的 WPtouch，它可以立即...。
  • WP Responsive Menu 》WP Responsive Menu是一個簡單的外掛，可以讓您在WordPress網站上快速添加高度可定制的響應式菜單，在設置頁面上直接進行自定義，無需任何編碼技能。, 查看實...。
  • Instant Articles for WP 》該外掛為Facebook即時文章（Instant Articles）新增支援，Facebook即時文章是一種讓發布者在Facebook上展示快速、互動式故事的新手段，文章會預先載入至Faceb...。
  • Favicon Rotator 》Favicon Rotator 外掛能夠讓您輕鬆客製化您網站上的圖示。只需透過管理頁面新增 favicon，並在每次訪客訪問您的網站時展示。, 亮點, , 新功能：為觸控裝置（A...。
  • Easy Video Player 》Easy Video Player 是一個易於使用的 WordPress 影片外掛程式，可展示您的影片。您可以嵌入自行架設的影片或使用直接連結外部架設的影片。, Easy Video Playe...。
  • ShiftNav – Responsive Mobile Menu 》ShiftNav 是 WordPress 的一個很棒的行動裝置選單外掛程式。它的外觀和操作方式與像 Facebook、Gmail 等受歡迎的應用程式的本機 App 側邊拉出式選單非常相似...。
  • Quick Call Button 》✅ 讓網站輕鬆增加快速撥打電話按鈕。, ✅ Quick Call Button 是一款外掛程式，可以添加快速撥打電話按鈕，幫助您的客戶避免輸入電話號碼，並能立即透過您的...。
  • Mobile Call Now & Map Buttons 》在設備上新增「立即致電」和「導航」按鈕, , 容易自定義列、文字、按鈕顏色和字體, 設置按鈕出現的裝置尺寸範圍, , 請注意, , 🔥 這是一個新的外掛，最近恢復...。
  • WP Responsive Table 》這個外掛使得在小螢幕上的 HTML 表格可以橫向滾動。它在其自己的容器中橫向滾動，使得顯示在螢幕上的表格可以更加符合螢幕大小。, 特色, , 開箱即用，無需額...。
  • mobble 》mobble 提供了與您網站相關的手機條件函數，例如 is_iphone()、is_mobile() 和 is_tablet()。, CSS 媒體查詢非常適合創建響應式網頁設計，但它們並不總是提供...。
  • Definitely allow mobile zooming 》這個小型的外掛會悄悄地新增 viewport meta tag，讓你的使用者能在行動裝置上縮放你的網站而不受限制。如果你在使用自己喜愛的智慧型手機卻發現無法縮放主題...。
  • WP SiteManager 》WordPress 作為 CMS 的功能價值隨著版本的增加而增加，目前的 3.4 版本充分利用自訂文章類型和自訂分類法的功能，使得創建多樣化的內容成為可能。然而，隨著...。

文章
Filter
Apply Filters
Close
Mastodon