Linux 软件免费装

Plugin Name

开发者 wescleveland
更新时间 2017年12月15日 05:53
捐献地址: 去捐款
PHP版本: 4.0 及以上
WordPress版本: 4.9.1
版权: GPLv2
版权网址: 版权信息

标签

CSS mobile class post type scroll post tags body post category post categories custom CSS post tag custom Body Classes 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 is-mobile is-tablet is-phone mobile_detect

下载

1.1 1.1.1 1.1.2 1.1.3 2.0 2.0.1 1.0 1.0.1 1.0.3

详情介绍:

Add unique classes to the body tag for easy styling based on post attributes (post type, slug, and ID) and various WordPress "is" functions: Add classes based on user scrolling through the page. You can check things like: 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: This plugin adds classes to the html body tag indicating: If the page being displayed is an archive 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; }

安装:

In the WordPress backend: That's it. You're now ready to customize your viewer's browsing experience.

屏幕截图:

  • Mobile Classes setting selection
  • Environment Classes setting selection
  • User Classes setting selection
  • Archive Classes setting selection
  • Post Classes setting selection
  • Scroll Classes setting selection
  • Custom Classes setting
  • Custom CSS setting

更新日志:

2.0.1 Fix Settings API bug 2.0 Added Scroll Classes Added page categories, post categories, and post tags options Added ability to choose Mobile-Detect Version Added Mobile-Detect version 2.8.26 Improved performance Improved memory footprint Added security to disallow script direct execution 1.1.3 Remove namespace use in WP247 Settings API to due errors 1.1.2 Make all admin classes unique to WP247 in order to avoid conflict in Admin Settings API 1.1.1 Correct potential 'active_tab' storage conflict in Admin Settings API 1.1 Implement Mobile classes based on mobiledetect.net's Mobile_Detect script 1.0.1 Fix PHP Error in wp247-settings-api 1.0 First release on 2015-March-1