內容簡介
為了基於文章屬性（文章類型、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;
}
