WP主题PridMag分拆:header.php

Pridmag这个主题并不是我主动下载的,应该是原站被某个黑客黑了被动下载的,索性将错就错继续使用了下来。但是还有不满意的地方,希望有天能够完全自主地做一款适合自己需求的主题,所以就从这个主题进行分拆和学习。对于一般主题的结构我是有所了解的,此处就不再阐述。本篇就先从页头的部分开始。

Header文件里主要是网页的head标签和body标签,涉及到css和js文件的引用以及导航、站点logo等配置。这里主要搞懂几个函数:

1、language_attributes()

用于同wp-admin后台设置的语言保持同步,zh-CN或者en-US之类。传送门

<html <?php language_attributes(); ?>>

2、bloginfo(‘charset’)

这是一个比较有用的函数用来显示一些常用的站点信息,本例中的charset就是显示默认的字符集,如非特别设定一般都是utf-8. bloginfo(String $show=”)可设置的相关参数包括:name, description, wpurl等等,但是需要注意某些参数可能并不推荐。参见传送门。另参见get_bloginfo().

name‘ – Displays the “Site Title” set in Settings > General. This data is retrieved from the “blogname” record in the wp_options table.
description‘ – Displays the “Tagline” set in Settings > General. This data is retrieved from the “blogdescription” record in the wp_options table.
wpurl‘ – Displays the “WordPress address (URL)” set in Settings > General. This data is retrieved from the “siteurl” record in the wp_options table. Consider echoing site_url() instead, especially for multi-site configurations using paths instead of subdomains (it will return the root site not the current sub-site).
url‘ – Displays the “Site address (URL)” set in Settings > General. This data is retrieved from the “home” record in the wp_options table. Consider echoing home_url() instead.
admin_email‘ – Displays the “E-mail address” set in Settings > General. This data is retrieved from the “admin_email” record in the wp_options table.
charset‘ – Displays the “Encoding for pages and feeds” set in Settings > Reading. This data is retrieved from the “blog_charset” record in the wp_options tableNote: this parameter always echoes “UTF-8”, which is the default encoding of WordPress.
version‘ – Displays the WordPress Version you use. This data is retrieved from the $wp_version
 variable set in wp-includes/version.php.
html_type‘ – Displays the Content-Type of WordPress HTML pages (default: “text/html”). This data is retrieved from the “html_type” record in the wp_options table. Themes and plugins can override the default value using the pre_option_html_type
 filter.
text_direction‘ – Displays the Text Direction of WordPress HTML pages. Consider using is_rtl() instead.
language‘ – Displays the language of WordPress.
stylesheet_url‘ – Displays the primary CSS (usually style.css) file URL of the active theme. Consider echoing get_stylesheet_uri() instead.
stylesheet_directory‘ – Displays the stylesheet directory URL of the active theme. (Was a local path in earlier WordPress versions.) Consider echoing get_stylesheet_directory_uri() instead.
template_url‘ / ‘template_directory‘ – URL of the active theme’s directory. Within child themes, both get_bloginfo(‘template_url’) and get_template() will return the parent theme directory. Consider echoing get_template_directory_uri() instead (for the parent template directory) or get_stylesheet_directory_uri() (for the child template directory).
pingback_url‘ – Displays the Pingback XML-RPC file URL (xmlrpc.php).
atom_url‘ – Displays the Atom feed URL (/feed/atom).
rdf_url‘ – Displays the RDF/RSS 1.0 feed URL (/feed/rfd).
rss_url‘ – Displays the RSS 0.92 feed URL (/feed/rss).
rss2_url‘ – Displays the RSS 2.0 feed URL (/feed).
comments_atom_url‘ – Displays the comments Atom feed URL (/comments/feed).
comments_rss2_url‘ – Displays the comments RSS 2.0 feed URL (/comments/feed).
siteurl‘ – Deprecated since version 2.2. Echo home_url() , or use bloginfo(‘url’).
home‘ – Deprecated since version 2.2. Echo home_url() , or use bloginfo(‘url’).

<meta charset="<?php bloginfo( 'charset' ); ?>">

3、wp_head()

wp_head()是一个对于主题自定义开发非常重要的action钩子,例如可以在其中引入必要的css和js文件,或者在页头中添加meta标签。参见传送门

<?php wp_head(); ?>
if ( ! function_exists( 'wpdocs_pingbackurl_example' ) ) {
	function wpdocs_pingbackurl_example() {
		if ( is_singular() && pings_open() ) {
			echo '<link rel="pingback" href="' . esc_url( get_bloginfo( 'pingback_url' ) ) . '">';
		}
	}
}
add_action( 'wp_head', 'wpdocs_pingbackurl_example' );

4、body_class()

自动给body标签添加一些属性。参见

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

5、esc_html_e()

6、get_theme_mod()

该函数调取与主题相关的设置,其数据存储于wp_options表中,其参数是set_theme_mod()中所设置的参数。它有两个参数,第一个是自定义的参数名,第二个是与第一个参数比较的默认值。如果只有第一个参数则返回值,如果同时填写了第二个参数则返回bool值(未亲自验证),参见官方文档。此外,其与get_option()的区别,这有一个详尽的比较和分析。get_theme_mod()是一个基于get_option()的二次包装函数,其速度慢的原因是相当于两次调用get_option(),一次是查询主题的名称,一次是调用对应主题的字段内容,通常而言这种慢是难以察觉的。

.footer {
     border-top: solid 1px #<?php echo get_theme_mod( 'background_color', '#fff' ); ?>;
}
<?php if ( true == get_theme_mod( 'pridmag_show_search', true ) ) : ?>

7、has_custom_logo() the_custom_logo() get_custom_logo()

分别用于判断、输出、获取自定义logo相关信息。has_custom_logo()将返回bool,而the_custom_logo()输出自定义logo,get_custom_logo()则返回图片的id。

echo esc_url( wp_get_attachment_url( get_theme_mod( 'custom_logo' ) ) );

8、is_front_page() is_home()

此二者属于wordpress中常见的Conditional Tags,is_front_page()用来判断请求来源是否是站点的主页(front page of the site),不应理解为包含了首页、归档页(archive)等在内的前端页面。其涵盖了在后台wp-admin设置中自定义首页的情况,返回值为bool,当主页显示设置为一个静态页面时其值为true,其他情况如is_home()一样。参见传送门。is_home()则判断是请求是否来源于home页(或称之为MainPage),或等同于home_rul()所指向的页面,如果在后台设置了仅当主页显示设置为静态页面时,其值为true(If a static page is set for the front page of the site, this function will return true only on the page you set as the “Posts page”).

事实上这两个函数有其共同的交集区间,也有不同的地方。可以参看此例

    <?php if ( have_posts() ) : ?>

    <?php if ( is_home() && ! is_front_page() ) : ?>
        <header>
            <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
        </header>
    <?php endif; ?>

9、esc_url()

用来检查和还原一个url。将移除url中的一系列字符特征标记。

A number of characters are removed from the URL. If the URL is for displaying (the default behaviour) ampersands are also replaced. The ‘clean_url’ filter is applied to the returned cleaned URL.

其用法简单如 echo esc_url( home_url('/')); 但是我们往往产生疑问,既然其output同home_url()一样,为甚么还要额外加一个esc_url? 参见讨论。其中提到了data validation的问题,也就是确保url请求的安全,参见文档。相关的还有esc_url_raw().

10、home_url() site_url()

分别显示home页和首页的url地址。

11、is_customize_preview()

判断主题是否处于预览状态(customizer preview page)。

12、wp_nav_menu( $args )

这是一个极为重要的主题函数,用于展示导航菜单,其参数为一个数组。一个或者多个菜单位置可以根据需要通过register_nav_menu()或者register_nav_menus()进行注册。

wp_nav_menu( array $args = array(
'menu'		=> "", // (int|string|WP_Term) Desired menu. Accepts a menu ID, slug, name, or object.
'menu_class'	=> "", // (string) CSS class to use for the ul element which forms the menu. Default 'menu'.
'menu_id'	=> "", // (string) The ID that is applied to the ul element which forms the menu. Default is the menu slug, incremented.
'container'	=> "", // (string) Whether to wrap the ul, and what to wrap it with. Default 'div'.
'container_class'=> "", // (string) Class that is applied to the container. Default 'menu-{menu slug}-container'.
'container_id'	=> "", // (string) The ID that is applied to the container.
'fallback_cb'	=> "", // (callable|bool) If the menu doesn't exists, a callback function will fire. Default is 'wp_page_menu'. Set to false for no fallback.
'before'	=> "", // (string) Text before the link markup.
'after'		=> "", // (string) Text after the link markup.
'link_before'	=> "", // (string) Text before the link text.
'link_after'	=> "", // (string) Text after the link text.
'echo'		=> "", // (bool) Whether to echo the menu or return it. Default true.
'depth'		=> "", // (int) How many levels of the hierarchy are to be included. 0 means all. Default 0.
'walker'	=> "", // (object) Instance of a custom walker class.
'theme_location'=> "", // (string) Theme location to be used. Must be registered with register_nav_menu() in order to be selectable by the user.
'items_wrap'=> "", // (string) How the list items should be wrapped. Default is a ul with an id and class. Uses printf() format with numbered placeholders.
'item_spacing'=> "", // (string) Whether to preserve whitespace within the menu's HTML. Accepts 'preserve' or 'discard'. Default 'preserve'.
) );

13、get_search_form( $echo )

调取搜索框。Wordpress有其自身设计好的搜索框,可以直接通过此函数进行调取。也可以使用相关的hooks进行自定义设计的搜索框。参见官方文档

/**
 * Generate custom search form
 *
 * @param string $form Form HTML.
 * @return string Modified form HTML.
 */
function wpdocs_my_search_form( $form ) {
	$form = '<form role="search" method="get" id="searchform" class="searchform" action="' . home_url( '/' ) . '" >
	<div><label class="screen-reader-text" for="s">' . __( 'Search for:' ) . '</label>
	<input type="text" value="' . get_search_query() . '" name="s" id="s" />
	<input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search' ) .'" />
	</div>
	</form>';

	return $form;
}
add_filter( 'get_search_form', 'wpdocs_my_search_form' );

14、is_active_sidebar()

属于Conditional Tags. 判断是否边栏存在组件(widget),或者说是否被激活,也就是说,当边栏中存在组件,那么这个边栏就是被激活了。参见文档。存在一个hook apply_filter('is_active_sidebar'),参见此处介绍,用例参照这篇文章

function modify_is_active_sidebar_defaults($is_active_sidebar, $index) { 

    // Update the $is_active_sidebar variable according to your website requirements and return this variable. You can modify the $is_active_sidebar variable conditionally too if you want.

    return $is_active_sidebar; 
}
// add the filter
add_filter( "is_active_sidebar", "modify_is_active_sidebar_defaults", 10, 2 );

15、dynamic_sidebar()