How does WordPress specify that article pages load JavaScript/CSS code?

MakingWordPressWhen theming, if there is a specific JavaScript or CSS code that appears on a specific page in WordPress, it will only be used once.

Where should the code be placed? Style.css or base.js?

But the cost of doing so is a bit high.

Example 1:

• Try to get Highslide JavaScript effect on your WordPress site.
• But usually it's only used for parts with images or desired pages, and loading pages on unused pages to add Highslide sections, so over 50 KB of JavaScript is too big.

Example 2:

• In an article put a standard compatibility method is to usetag inserts it, but the insertedThe page generated by the tag cannot pass the W3C verification.
• A good way to do this is to use SWFObject, a JavaScript that generates W3C-validated code.
• But the problem is that it is wasteful to load SWFObject on every page in WordPress, and not all pages use this JavaScript file.

In fact, we can use WordPress' powerful custom fields to implement different JavaScript pages for custom posts or page loads.

This article will show you: How to use custom fields on WordPress, custom JavaScript or CSS files?

If you can understand, custom field values ​​are not as simple as JavaScript and CSS files.

How to add custom fields in WordPress themes?

Open the header.php file of the WordPress theme and find the code ▼

<?php wp_head(); ?>

add ▼ after it

<!-- 指定文章页面加载JavaScript/CSS代码 开始 -->
    <?php if (is_single() || is_page()) {
$head = get_post_meta($post->ID, 'head', true); 
if (!empty($head)) { ?> 
<?php echo $head; ?> 
<?php } } ?>
<!-- 指定文章页面加载JavaScript/CSS代码 结束 -->

The head in the code is the name of the custom field, which can be customized.

Add custom fields to WordPress posts or pages

WordPress backendIn the editor of the edit article page, there is a small window for "custom fields".

1. For "Name" enter:head
2. Then in "Value" enter the code you want to add to the display ▼

• Click Add Custom Field.
• Updating the article will allow you to code the theme and enter values ​​for these custom fields.

Since you only output the code that needs to be loaded in "value", you need to enter the following similar code in "value" ▼

<script type="text/javascript">...</script>

or ▼

<style type="text/css">...</style>

to output the above code.

Other uses for WordPress custom fields

After understanding the above principles, you will find that WordPress custom fields can not only implement custom JavaScript or CSS for custom pages, but also implement many functions through custom fields, such as: add to article thumbnails, article tips, etc. .

As for how to implement them, try using custom fields.

How to specify article tags and category headers and footers to load JavaScript/CSS code in WordPress?

How to Customize Header in WordPress?We can install it through the following article instructionsWordPress pluginRealize adding head code▼

How does WordPress add head code to articles? WP plugin optimizes head code

As in this article How to Customize Header in WordPress?The Header Footer Code Manager plugin described in "Installing the WordPress Footer Header Plugin" cannot add PHP code at present... Therefore, I searched on the official website of the WordPress plugin and found that it can be found on the header page...

How to Customize Header in WordPress?Install WordPress Footer Header Plugin

Some WordPress HTML / Javascript / CSS code only needs to be displayed in a certain article or page. We can add header and footer code to the specified article / page in WordPress through the Header Footer Code Manager plugin. Header Footer…

• In this way, there is no need to worry about losing custom code or manually transferring custom code after changing the WordPress theme.