A-A+
wordpress主题制作常用内容
1、看有哪些模版页面
2、分析这些模版页面的结构布局，分上下左右部分。
首页模版 index.php
文章模版 single.php
分类模版 category.php (category-3.php)
创建主题
1、识别主题
index.php
style.css
/*
Theme Name: 我的主题
Theme URI: http://imdupeng.cn
Author: DP
Author URI:
Description:
Version: 1.0
*/
2、解构模版文件
看所有页面的共同部分，把共同部分拆分出来。
header.php
footer.php
sidebar.php
header-a23.php
xxx.php
3、动态调用（共同部分）模版文件
<?php get_headr(); ?>
<?php get_footer(); ?>
<?php get_sidebar(); ?>
<?php get_headr('a23'); ?> 创建不同页头、页脚、页边栏的方法
<?php include('xxx.php') ?> 也可以
4、多语音翻译
<p><?php _e('English','主题名字') ?></p>
5、header.php
<html <?php language_attributes(); ?>> lang="zh-CN" 文档语音
<meta <?php bloginfo('charset') ?>> utf-8 字符集
在</title>标签下面添加<?php wp_head(); ?>这个钩子函数
样式表、js、图片等需要修改链接，获得当前主题位置<?php echo get_template_directory_uri(); ?>
6、标题：
<title><?php wp_title('&hearts',true,'right'); ?></title>
并在主题functions.php中添加以下代码
/*
* 网站的页面标题
*/
function imdupeng_wp_title( $title, $sep ) {
global $paged, $page;
if ( is_feed() )
return $title;
// 添加网站名称
$title .= get_bloginfo( 'name' );
// 为首页添加网站描述
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
$title = "$title $sep $site_description";
// 在页面标题中添加页码
if ( $paged >= 2 || $page >= 2 )
$title = "$title $sep " . sprintf( __( 'Page %s', 'fenikso' ), max( $paged, $page ) );
return $title;
}
add_filter( 'wp_title', 'imdupeng_wp_title', 10, 2 );
7、LOGO设置
<a href="<?php echo esc_url(home_url('/')); ?>" tilte="返回首页">
<img id="logo" src="<?php echo get_template_directory_uri(); ?>/image/logo.png" alt="<?php echo esc_attr(get_bloginfo('name','display')); ?>">
</a>
8、搜索框
<?php get_search_form(); ?>
官网可以查到这个代码的详细用法
9、让主题支持定制菜单
在主题目录下functions.php文件中添加
function imdupeng_setup(){
register_nav_menu('topmenu','菜单描述');
}
10、在前端调用定制的菜单
<?php wp_nav_menu(array(
'theme_location' => 'topmenu',
'menu_class' => 'nav',
'container' => false,
'walker' => new imdupeng_Nav_Walker,
));?>
详情搜索：bootstrap wordpress 导航
11、默认循环
判断当前页面是否有文章
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post();>
<p>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
</p>
<?php endwhile; ?>
<?php endif; ?>
12、判断条件标签
<?php if(in_category('4')) : ?>
这是文章分类4！
<?php else: ?>
这不是文章分类4！
<?php endif; ?>
13、自定义循环
<?php $myqueryargs = array(
'post_type' => 'post',
'post_per_page' => 20, //分页显示多少条
'orderby' => 'date', //按日期排序
'order' => 'desc', //降序排列
'category__in' => array(8,9,15), //要查询的分类id
); ?>
<?php $myquery = new WP_query($myqueryargs); ?>
<?php if($myquery -> have_posts()); ?>
<ol>
<?php while($myquery -> have_posts()) : $myquery -> the_post();>
<li>
<?php the_title(); ?>
<?php the_content(); ?>
</li>
<?php endwhile; ?>
</ol>
<?php endif; ?>
<?php wp_reset_postdata(); ?> //自定义查询后要恢复一下
14、wordpress文章调用标签
文章特色图片<?php the_post_shumbnail(); ?>
文章指定自定义字段<?php echo get_post_meta($post->ID,'字段名',true); ?>
文章所有字段<?php the_meta(); ?>
修改所有字段样式，functions.php内容如下
/*
* 修改自定义字段列表的显示
*/
function imdupeng_the_meta() {
if ( $keys = get_post_custom_keys() ) {
echo "<dl class='dl-horizontal'>\n";
foreach ( (array) $keys as $key ) {
$keyt = trim($key);
if ( is_protected_meta( $keyt, 'post' ) )
continue;
$values = array_map('trim', get_post_custom_values($key));
$value = implode($values,', ');
echo apply_filters('the_meta_key', "<dt>$key</dt><dd>$value</dd>\n", $key, $value);
}
echo "</dl>\n";
}
}
再到前台把<?php the_meta(); ?>修改为<?php imdupeng_the_meta(); ?>
文章的链接<?php the_permalink(); ?>
发布日期<?php echo get_the_date('Y-m-d'); ?>
文章标签<?php the_tags('','-'); ?>
文章所属分类<?php the_cate('-'); ?>
作者名称：<?php echo get_the_author(); ?>
作者的所有文章链接地址：<?php echo esc_url(get_author_posts_url(get_the_author_meta('ID'))); ?>
esc_url的用处的安全处理链接地址。
评论 <?php comments_popup_link('<i></i>','<i></i> 1','<i></i> %', 'btn btn-mini'); ?>
第一个是没有评论的样式，第二个是只有一个评论的样式，第三个有多个评论的样式，第四个是btn和btnmini的样式
15、作者头像
<?php echo get_avatar(get_the_author_meta('user_email')); ?>
作者头像更换样式，编辑主题下functions.php添加以下代码
function imdupeng_avatar_css($class){
$class = str_replace("class='avatar','imdupeng_nav_menu_css_class'");
return $class;
}
add_filter('get_avatar','imdupeng_avatar_css');
16、列表页分页翻页按钮
<?php previous_posts_link(); ?>
<?php next_posts_link(); ?>
自行百度
详情页分页按钮
<?php previous_posts_link('%link','← ' . '%title'); ?>
<?php next_posts_link('%link','← ' . '%title'); ?>
17、面包屑
使用三方插件：breadcrumb-navxt
http://wordpress.org/extend/plugins/breadcrumb-navxt
启用插件后，在前台相应位置加入以下代码
<?php if(function_exists('bcn_display') : ?>
<ul>
<?php bcn_display(); ?>
</ul>
<?php endif; ?>
然后到后台插件设置面包屑的样式，改为模版的样式即可
18、注册小工具
function imdupeng_widgets_init(){
register_sidebar(array(
'name'=>'mingzi',
'id'=>'sidebar-bottom',
'description'=>'xxx',
'before_widget' => '<div id="%1$s"><section>',
'after_widget' =>'</section></div>',
'before_title' =>'<h3><span>',
'after_title' =>'</span></h3>',
));
}
add_action('widgets_init','imdupeng_widgets_init');
%1$s和%2$s会自动替换
然后到前端相应位置调用
<?php if(is_active_sidebar('sidebar-bottom')) : ?>
<?php dynamic_sidebar('sidebar-bottom') ?>
<?php endif; ?>
