未加星标

Lots of ways to add an ID to the `body` element

字体大小 | |
[开发(php) 所属分类 开发(php) | 发布者 店小二05 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

The following is a guest post by Trishah Woolley . Over the years, Trishah has collected a ton of code snippets that to the job of adding IDs and classes based on some variable information, like the URL or data from WordPress. Each of these snippets were either either collected from documentation or a similar online resource, or written by Trishah based on standard features of the language and API's involved.

Over the time I have been doing WordPress web design, there are occasions when I have needed to add an ID or class to the <body> tag. For example: This often happens when integrating a 3rd party into WordPress that creates its own pages that WordPress doesn't recognize. Or I need more nuanced classes for the site design I'm creating.

To change the look of these pages in a way that the styles are scoped just to that page, we need a way to target just that page or category of pages. Below are some of the ways I have found helpful to add IDs and classes to the <body> of both non-WordPress (but stillphp) and WordPress pages.

PHP Variations #01 - Add ID from the URL

This will strip the forward-slash, `.php`, and the `?pg=`, from the URL and use the rest as an ID. Change the array to match your particular situation.

<?php
$page = str_replace(array('/', '.php', '?pg='), '', $_SERVER['REQUEST_URI']);
$page = $page ? $page : 'default';
?>
<body id="<?php echo $page ?>">

Example:

http://domain.com/directory/test.php?pg=12345

Becomes:

<body id="directorytest12345"> #02 - Add ID and Class from URL

This looks for the `?` in the URL and turns what comes before it into an ID and what comes after it into a class.

<?php
list($page, $class) = explode('?', $_SERVER['REQUEST_URI']);
$page = str_replace(array('/', '.php'), '', $page);
$class = str_replace(array('='), '', $class);
?>
<body id="<?php echo $page ?>" class="<?php echo $class ?>">

Example:

http://domain.com/directory/test/?pg=12345

Becomes:

<body id="directorytest" class="12345"> #03 - Add ID from file name

This removes the `.php` and uses the file name as the ID:

<body id="<?=basename($_SERVER['PHP_SELF'],'.php')?>">

Example:

http://domain.com/directory/test.php

Becomes:

<body id="test"> #04 - Add ID from First Level Directory

This will grab the first level directory and use it as the ID.

$url = explode('/', $_SERVER['REQUEST_URI']);
$dir = $url[1] ? $url[1] : 'home';
?>
<body id="<?php echo $dir ?>">

Example:

http://domain.com/directory1/directory2/test.php

Becomes:

<body id="directory1"> WordPress Variations

WordPress has a native function for applying classes to the body:

<body <?php body_class(); ?>>

Which results in output like this, depending on what page you are on:

<body class="single single-post postid-245501 single-format-standard">

But you can still do more, like combine it with techniques from above and add classes of your own.

#05 - WordPress: Add a Class to Default Body Class

Add your own class to the ones generated by WordPress with this:

<body <?php body_class('class-one ); ?>>

Becomes:

<body class="page page-id-2 page-parent page-template-default logged-in class-one"> #06 - WordPress: Add Multiple Classes to Default Body Class

You can add multiple classes like this:

<?php body_class(array("class-one", "class-two", "class-three")); ?>

Becomes:

<body class="page page-id-2 page-parent page-template-default logged-in class-one class-two class-three"> #07 - WordPress: Add ID and Class to Body Tags

This just may be my favorite! It does the same as the one above but adds the new class to the WordPress' body_class :

list($page, $class) = explode('?', $_SERVER['REQUEST_URI']);
$page = str_replace(array('/', '.php'), '', $page);
$class = str_replace(array('='), '', $class);
?>
<body id="<?php echo $page ?>" <?php if (function_exists('body_class')) body_class($class ); ?>>

Example:

http://domain.com/directory/test/?pg=12345

Becomes:

<body id="directorytest" and class="page page-id-2 page-parent page-template-default logged-in 12345"> #08 - WordPress: Use the Slug <body id="<?php echo $post->post_name; ?>">

Example:

http://domain.com/category1/slug/

Becomes:

<body id="slug"> #09 - WordPress: Conditionally Add Extra Classes

This a body class to the ones generated by WordPress with conditional if() logic. For example, here we're using the is_shop() boolean logic provided by WooCommerce:

<body <?php if (is_shop()) { body_class('shop'); } else { body_class(); } ?>>

Becomes:

<body class="page page-id-2 page-parent page-template-default logged-in shop"> #10 - WordPress: Add the Slug to the Body Class Defaults

We can also alter the output of the body_class() function by filtering it. We could do this in `functions.php` or our own functionality plugin.

Here we'll add the slug:

function add_slug_body_class( $classes ) {
global $post;
if (isset($post)) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter('body_class', 'add_slug_body_class');

Example:

http://domain.com/category/page-slug/

Becomes:

<body class="page page-id-2 page-parent page-template-default logged-in page-slug"> #11 - WordPress: Add to Body Class using function.php Filter

Add the following to functions.php:

function my_body_classes( $classes ) {
$classes[] = 'class1';
return $classes;
}
add_filter('body_class', 'my_body_classes');

Then it would output like this, just calling body_class() directly without doing anything else:

<body class="page page-id-2 page-parent page-template-default logged-in my_body_classes"> #12 - WordPress: Raw Filtering of Function using Functions.php

This is how you would add a single class of any name:

function my_body_classes( $classes ) {
$classes[] = 'class1';
return $classes;
}
add_filter('body_class', 'my_body_classes');

Becomes:

<body class="page page-id-2 page-parent page-template-default logged-in class1"> #13 - WordPress: Raw Filtering of Function using Functions.php to Add Multiple Classes, Conditionally function my_body_classes( $classes ) {
$classes[] = 'class1';
if (is_shop()) {
$classes[] = 'shop';
}
return $classes;
}
add_filter('body_class', 'my_body_classes');

Becomes this on a non-shop page:

<body class="page page-id-2 page-parent page-template-default logged-in class1">

Becomes this if the logic comes out true , i.e., on a shop page:

本文开发(php)相关术语:php代码审计工具 php开发工程师 移动开发者大会 移动互联网开发 web开发工程师 软件开发流程 软件开发工程师

主题: PHPWord
分页:12
转载请注明
本文标题:Lots of ways to add an ID to the `body` element
本站链接:http://www.codesec.net/view/481735.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 开发(php) | 评论(0) | 阅读(30)