A-A+

wordpress主题制作常用内容

2015年12月24日 WordPress 暂无评论 阅读 3,136 views 次
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','&larr; ' . '%title'); ?>
<?php next_posts_link('%link','&larr; ' . '%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; ?>

给我留言