There are many themes available for WordPress, but for this article, I've chosen the 'customizr' theme.
- It's built on Bootstrap (responsive design).
- Since it's my personal page, I don't plan to do much design work, so it looks clean even out-of-the-box.
There are various reasons, but essentially, I just liked that it looked clean without needing much customization.
In my web design work, I often use 'customizr' as a base for projects.
I'll be introducing essential features for running a WordPress site.
Creating an Area to Write Page-Specific CSS and Javascript on Posts and Pages
<style>
font-size:20px;
</style>
記事・・・You could directly write CSS like that, or even inline styles within tags.
While browsers will display it correctly, it deviates from standard HTML practices.
Simply put, it's recommended to write CSS within the `<head>` section.
So, let's create a field where we can properly write CSS within the head.
⇒http://nelog.jp/custum-field-in-theme
1. Create Custom Fields
By default, custom fields are not displayed on the new post screen.
On the post editing screen, click 'Screen Options' in the top right and check the 'Custom Fields' checkbox.
This will display a 'Custom Fields' box on the page.
Create custom fields named `header_custom` and `footer_custom`.
2. Create the Templates to Include
Following the reference site, I'll try to create a structure that includes templates using WordPress's `get_template_part()` function.
<?php
if ( is_singular() ){
$head_custom = get_post_meta($post->ID, 'head_custom', true);
if ( $head_custom ) {
echo $head_custom;
}
}
?><?php
if ( is_singular() ){
$footer_custom = get_post_meta($post->ID, 'footer_custom', true);
if ( $footer_custom ) {
echo $footer_custom;
}
}
?>get_post_meta($post_id, $key, $single);
is a function that retrieves the value of a custom field from a specific key of a particular post.
`$post_id` ⇒ The ID of the post from which you want to retrieve custom fields. In the example above, the ID property of the global `$post` object is used.
`$single` ⇒ If `true`, returns as a string. If not set or `false`, returns an array.
is_singular( $post_types );
If any of them are `true`, `is_singular` will return `true`. In this case, we want to apply the condition to both post pages and static pages, so we'll leave it as is.
If you only want to apply it to post pages, you can change it to `is_single()`.
`$post_types` ⇒ Optional. Allows you to check for specified post types.
3. Include in Header and Footer
For the Customizr theme, the PHP file that generates the header is as follows:
/wp-content/themes/customizr/inc/parts/class-header-header_main.php
<?php get_template_part('head-custom-field'); ?>Similarly, for the footer. Placing it just before the end of the body tag should be fine.
/wp-content/themes/customizr/footer.php
<?php get_template_part('footer-custom-field'); ?>With this, embedding custom fields in the header and footer is complete.
4. How to Use
As a recap, when editing a post, display 'Custom Fields' from 'Screen Options'.
When embedding in the head, use `header_custom` for the name.
A word of caution: the embedded content is output directly, so forgetting to close PHP tags or quotes might break the display.
RECOMMENDED WORDPRESS BOOKS
I do read books, but I truly feel that you learn more deeply when you actually implement things.
I recommend reading books about WordPress itself and about PHP.
Understanding HTML and CSS will broaden your capabilities, but the great thing about WordPress is that you can manage the design by relying on templates.
The Easiest WordPress Introduction Class (Japanese) Paperback
WordPress basics. It carefully explains everything from installation.
There are many books available, so any will do, but this one is recently published and the author is beautiful.
For those seriously developing. It introduces practical examples, so it can also be used for idea generation.
📦