WordPress主题制作中自定义头部的相关PHP函数解析
<p><strong>header_image()</strong><br>
header_image() 函数是 WordPress 自定顶部图像的标准接口函数，该函数可以自动判断后台设置，并返回字符串形式的用户自定义顶部图像地址。本文主要涉及该函数的详解及使用。</p>
<p>
【Display header image path.】 即，显示顶部图像地址。<br>
使用</p>
<blockquote>
<ol>
<li>
<p>
<span><span><img src=</span><span>"<?php header_image(); ?>"</span><span> width=</span><span>"<?php echo $header_image_width; ?>"</span><span> height=</span><span>"<?php echo $header_image_height; ?>"</span><span> alt=</span><span>""</span><span> /> </span></span></p>
</li>
</ol>
</blockquote>
<div>
<p>
函数声明源代码</p>
<blockquote>
<ol>
<li>
<p>
<span><span>function</span><span> header_textcolor() { </span></span></p>
</li>
<li>
<p>
<span> echo get_header_textcolor(); </span></p>
</li>
<li>
<p>
<span>} </span></p>
</li>
<li>
<p>
<span><span>function</span><span> get_header_image() { </span></span></p>
</li>
<li>
<p>
<span> $url = get_theme_mod( <span>'header_image'</span><span>, get_theme_support( </span><span>'custom-header'</span><span>, </span><span>'default-image'</span><span> ) ); </span></span></p>
</li>
<li>
<p>
<span> </span></p>
</li>
<li>
<p>
<span> <span>if</span><span> ( </span><span>'remove-header'</span><span> == $url ) </span></span></p>
</li>
<li>
<p>
<span> <span>return</span><span> </span><span>false</span><span>; </span></span></p>
</li>
<li>
<p>
<span> </span></p>
</li>
<li>
<p>
<span> <span>if</span><span> ( is_random_header_image() ) </span></span></p>
</li>
<li>
<p>
<span> $url = get_random_header_image(); </span></p>
</li>
<li>
<p>
<span> </span></p>
</li>
<li>
<p>
<span> <span>if</span><span> ( is_ssl() ) </span></span></p>
</li>
<li>
<p>
<span> $url = str_replace( <span>'http://'</span><span>, </span><span>'https://'</span><span>, $url ); </span></span></p>
</li>
<li>
<p>
<span> <span>else</span><span> </span></span></p>
</li>
<li>
<p>
<span> $url = str_replace( <span>'https://'</span><span>, </span><span>'http://'</span><span>, $url ); </span></span></p>
</li>
<li>
<p>
<span> </span></p>
</li>
<li>
<p>
<span> <span>return</span><span> esc_url_raw( $url ); </span></span></p>
</li>
<li>
<p>
<span>} </span></p>
</li>
</ol>
</blockquote>
<p>
<strong>get_custom_header 自定义顶部</strong></p>
</div>
<p>
get_custom_header 函数是 WordPress 3.4 送给我们的新礼物，该函数的出现是为了更好的集成和封装顶部的使用，本文主要对 get_custom_header 这个函数进行详解、以及如何在 WordPress 3.4 版本的主题中集成顶部功能。</p>
<p>
请注意，根据本文折腾你的主题时，请确保你的 WordPress 已经升级到 3.4版本。</p>
<p>
get_custom_header 意义详解<br>
自定义顶部目前大部分主题主要用到的还只是两个功能 1.自定义顶部图像 2.自定义顶部样式<br>
具体的效果你可以看一下 默认主题 twenty eleven ，或者我的另一个博客 悠悠我心<br>
本函数是 WP 3.4 版本后才出现的一个内置函数，主要用于将用户设置的顶部的各项参数以对象（object）的形式返回。<br>
单单说这么句屁话，也许你还不明白，想要明白的话，请往下看。<br>
请注意本函数与get_header()有着本质的区别。</p>
<p>
函数使用实例<br>
下面的例子来自于 默认主题 twenty eleven 中 header.php 文件<br>
PHP 代码：</p>
<blockquote>
<ol>
<li>
<p>
<span><span>//判断是否存在该函数，以便兼容老版本</span><span> </span></span></p>
</li>
<li>
<p>
<span><span>if</span><span> ( function_exists( </span><span>'get_custom_header'</span><span> ) ) { </span></span></p>
</li>
<li>
<p>
<span><span>//get_custom_header()->width 调用带向 width 属性</span><span> </span></span></p>
</li>
<li>
<p>
<span>$header_image_width = get_custom_header()->width; </span></p>
</li>
<li>
<p>
<span><span>//get_custom_header()->height 调用带向 height 属性</span><span> </span></span></p>
</li>
<li>
<p>
<span>$header_image_height = get_custom_header()->height; </span></p>
</li>
<li>
<p>
<span>} <span>else</span><span> {</span><span>//兼容老版本的代码</span><span> </span></span></p>
</li>
<li>
<p>
<span>$header_image_width = HEADER_IMAGE_WIDTH; </span></p>
</li>
<li>
<p>
<span>$header_image_height = HEADER_IMAGE_HEIGHT; </span></p>
</li>
<li>
<p>
<span>} </span></p>
</li>
</ol>
</blockquote>
<p>
综合使用详解<br>
以下主要援引官方文档解释 自定义顶部</p>
<blockquote>
<ol>
<li>
<p>
<span><span>//打开主题自定义顶部支持</span><span> </span></span></p>
</li>
<li>
<p>
<span>add_theme_support( <span>'custom-header'</span><span> ); </span></span></p>
</li>
<li>
<p>
<span> </span></p>
</li>
<li>
<p>
<span>$headarg = array(<span>//将设置打包成数组</span><span> </span></span></p>
</li>
<li>
<p>
<span> <span>'default-image'</span><span> => </span><span>''</span><span>, </span></span></p>
</li>
<li>
<p>
<span> <span>'random-default'</span><span> => </span><span>false</span><span>, </span></span></p>
</li>
<li>
<p>
<span> <span>'width'</span><span> => 0, </span></span></p>
</li>
<li>
<p>
<span> <span>'height'</span><span> => 0, </span></span></p>
</li>
<li>
<p>
<span> <span>'flex-height'</span><span> => </span><span>false</span><span>, </span></span></p>
</li>
<li>
<p>
<span> <span>'flex-width'</span><span> => </span><span>false</span><span>, </span></span></p>
</li>
<li>
<p>
<span> <span>'default-text-color'</span><span> => </span><span>''</span><span>, </span></span></p>
</li>
<li>
<p>
<span> <span>'header-text'</span><span> => </span><span>true</span><span>, </span></span></p>
</li>
<li>
<p>
<span> <span>'uploads'</span><span> => </span><span>true</span><span>, </span></span></p>
</li>
<li>
<p>
<span> <span>'wp-head-callback'</span><span> => </span><span>''</span><span>, </span></span></p>
</li>
<li>
<p>
<span> <span>'admin-head-callback'</span><span> => </span><span>''</span><span>, </span></span></p>
</li>
<li>
<p>
<span> <span>'admin-preview-callback'</span><span> => </span><span>''</span><span>, </span></span></p>
</li>
<li>
<p>
<span>); </span></p>
</li>
<li>
<p>
<span><span>//将数组中的设置添加到自定义顶部上</span><span> </span></span></p>
</li>
<li>
<p>
<span>add_theme_support( <span>'custom-header'</span><span>, $headarg ); </span></span></p>
</li>
</ol>
</blockquote>
<p>
自定义顶部图像</p>
<blockquote>
<ol>
<li>
<p>
<span><span>//打开主题自定义顶部支持</span><span> </span></span></p>
</li>
<li>
<p>
<span>add_theme_support( <span>'custom-header'</span><span> ); </span></span></p>
</li>
<li>
<p>
<span> </span></p>
</li>
<li>
<p>
<span>$headarg = array(<span>//将设置打包成数组</span><span> </span></span></p>
</li>
<li>
<p>
<span> <span>'default-image'</span><span> => </span><span>''</span><span>, </span></span></p>
</li>
<li>
<p>
<span> <span>'random-default'</span><span> => </span><span>false</span><span>, </span></span></p>
</li>
<li>
<p>
<span> <span>'width'</span><span> => 0, </span></span></p>
</li>
<li>
<p>
<span> <span>'height'</span><span> => 0, </span></span></p>
</li>
<li>
<p>
<span> <span>'flex-height'</span><span> => </span><span>false</span><span>, </span></span></p>
</li>
<li>
<p>
<span> <span>'flex-width'</span><span> => </span><span>false</span><span>, </span></span></p>
</li>
<li>
<p>
<span> <span>'default-text-color'</span><span> => </span><span>''</span><span>, </span></span></p>
</li>
<li>
<p>
<span> <span>'header-text'</span><span> => </span><span>true</span><span>, </span></span></p>
</li>
<li>
<p>
<span> <span>'uploads'</span><span> => </span><span>true</span><span>, </span></span></p>
</li>
<li>
<p>
<span> <span>'wp-head-callback'</span><span> => </span><span>''</span><span>, </span></span></p>
</li>
<li>
<p>
<span> <span>'admin-head-callback'</span><span> => </span><span>''</span><span>, </span></span></p>
</li>
<li>
<p>
<span> <span>'admin-preview-callback'</span><span> => </span><span>''</span><span>, </span></span></p>
</li>
<li>
<p>
<span>); </span></p>
</li>
<li>
<p>
<span><span>//将数组中的设置添加到自定义顶部上</span><span> </span></span></p>
</li>
<li>
<p>
<span>add_theme_support( <span>'custom-header'</span><span>, $headarg ); </span></span></p>
</li>
</ol>
</blockquote>
<p>
自适应顶部图像设置</p>
<blockquote>
<ol>
<li>
<p>
<span><span>$args = array( </span></span></p>
</li>
<li>
<p>
<span> <span>'flex-width'</span><span> => </span><span>true</span><span>,</span><span>//自适应高度</span><span> </span></span></p>
</li>
<li>
<p>
<span> <span>'width'</span><span> => 980, </span></span></p>
</li>
<li>
<p>
<span> <span>'flex-width'</span><span> => </span><span>true</span><span>,</span><span>//自适应宽度</span><span> </span></span></p>
</li>
<li>
<p>
<span> <span>'height'</span><span> => 200, </span></span></p>
</li>
<li>
<p>
<span> <span>'default-image'</span><span> => get_template_directory_uri() . </span><span>'/images/header.jpg'</span><span>, </span></span></p>
</li>
<li>
<p>
<span>); </span></p>
</li>
<li>
<p>
<span>add_theme_support( <span>'custom-header'</span><span>, $args ); </span></span></p>
</li>
</ol>
</blockquote>
<p>
自定义顶部图像的调用</p>
<blockquote>
<ol>
<li>
<p>
<span><span><img </span></span></p>
</li>
<li>
<p>
<span> src=<span>"<?php header_image(); ?>"</span><span> </span></span></p>
</li>
<li>
<p>
<span> height=<span>"<?php echo get_custom_header()->height; ?>"</span><span> </span></span></p>
</li>
<li>
<p>
<span> width=<span>"<?php echo get_custom_header()->width; ?>"</span><span> </span></span></p>
</li>
<li>
<p>
<span> alt=<span>""</span><span> </span></span></p>
</li>
<li>
<p>
<span>/> </span></p>
</li>
</ol>
</blockquote>
頁:
[1]