head头部
head开始需要放置
|
<meta charset=“utf-8”>
<meta http–equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1,maximum-scale=1”>
<meta name=“Author” content=“Supported by Eastern Studio | www.eastdesign.net” />
|
特别声明的是,在360内核下,可能由于部分网页的样式没有写好或者是其他兼容性问题,需要对不同内核进行规避操作:
若页面需默认用ie兼容内核,增加标签:
<meta name=”renderer” content=”ie-comp”>
若页面需默认用ie标准内核,增加标签:
<meta name=”renderer” content=”ie-stand”>
若页面需默认用极速核,增加标签
<meta name=”renderer” content=”webkit”>
head结尾部分有两个注意
第一点是引入CSS样式
|
<link href=“<?php echo get_template_directory_uri(); ?>/css/font-awesome.min.css” rel=“stylesheet”>
<link href=“<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.css” rel=“stylesheet” >
<?php echo get_template_directory_uri(); ?>是为了获取远程服务器中相应目录文件夹中的内容
|
第二点是设置favicon
|
<link rel=“shortcut icon” type=“image/x-icon” href=“/favicon.ico” sizes=“16×16 24×24 32×32 48×48”>
<link rel=“apple-touch-icon-precomposed” type=“image/png” href=“/apple-icon.png” sizes=“114×114”>
<meta name=“apple-mobile-web-app-title” content=“网站名称”>
|
主体部分
h1标签
当前页面H1标签有且只能有一个;
在首页,h1标签一般放置在logo上
<h1>
<a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” >
<img width=”宽度大小” height=”高度大小” alt=”<?php bloginfo( ‘name’ ); ?>” src=”<?php echo esc_url( get_template_directory_uri() ); ?>/images/logo.png” >
</a>
</h1>
在内页,h1标签一般放置在当前页面的标题上,这时候需要将logo上的H1拿掉,即设置两种头部,首页的page-head-home.php ,内页是page-head.php
例如在about us页面, <h1><?php the_title(); ?></h1>,这边的<?php the_title(); ?>会直接读取到页面“about us”的名字;
a标签
首先当a是出站链接的时候,需要rel=”nofollow”属性
例如社会化分享图标,<a href=”https://www.youtube.com/channel/ “ rel=”follow” title=””follow””>;
当a站内链接的时候则不需要,
例如获取产品的链接,<a href=”<?php echo get_permalink($post->ID) ?>” title=”<?php echo $post->post_title ?>”>;
img标签
img是需要设置width和height属性的;
针对本地图片,直接<img width=”宽度大小” height=”高度大小” alt=”<?php bloginfo( ‘name’ ); ?>” src=”<?php echo esc_url( get_template_directory_uri() ); ?>/images/图片名称.png” >
针对wordpress后台媒体库需要动态调取的图片,我们需要先通过FTP上传timthumb.php到相应目录下(timthumb能够实现WordPress缩略图截取)
<img width=”图片宽度” height=”图片高度” src=”<?php bloginfo(‘template_url’)?>/timthumb.php?src=图片地址&h=图片高度&w=图片宽度&zc=1″ alt=”图片名称”/>
其中,h为缩略图的高度,w为缩略图宽度,zc有两个属性值,1表示裁剪,0表示按设置的高宽压缩,不裁剪。
获取wordpress可编辑部分内容
|
<?php while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
|
面包屑
|
<div class=“breadcrumb”>
<?php if(function_exists(‘bcn_display’))
{
bcn_display();
}?>
</div><!— .breadcrumb —>
|
Content部分小功能
针对产品页面列出post
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<ul class=“news_center-list”>
<?php
$page = get_query_var( ‘paged’ ) ? get_query_var( ‘paged’ ) : 1;
$search_args = array(
‘post_type’ => ‘post’,
‘showposts’ => 1000,
‘paged’ => $page
);
query_posts($search_args);
?>
<?php while ( have_posts() ) : the_post();?>
<li>
<a class=“new_title” href=“<?php echo get_permalink($post->ID) ?>“ title=“<?php echo $post->post_title ?>“><h5><?php the_title(); ?></h5></a>
<p class=“new_time”>[<?php the_time(‘Y-m-j’);?>]</p>
<div class=“clearfix”></div>
</li>
<?php endwhile;?>
<?php wp_reset_query(); ?>
</ul>
|
针对分类页面列出默认post分类以及其下的posts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
<aside id=“categories-2” class=“widget widget_categories”>
<div class=“aside-bg”>
<h3 class=“widget-title”>Category</h3>
<ul>
<?php
$args=array(
‘orderby’ => ‘name’,
‘order’ => ‘ASC’,
‘number’ => ’50’,
‘hide_empty’ => ‘0’,
‘parent’ => 0
);
$categories=get_categories($args);
foreach($categories as $category) :
?>
<li>
<div class=“widget-categories-title”>
<a href=“<?php echo get_category_link( $category->term_id ) ?>“ title=“<?php echo $category->name ?>“>
<?php echo $category->name ?>
</a>
</div>
<ul class=“widget-categories-children”>
<?php
$page = get_query_var( ‘paged’ ) ? get_query_var( ‘paged’ ) : 1;
$search_args = array(
‘post_type’ => ‘post’,
‘cat’ => $category->term_id,
‘paged’ => $page
);
query_posts($search_args);?>
<?php while ( have_posts() ) : the_post();?>
<?php $thumb_t = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), ‘large’ ); $url_t = $thumb_t[‘0’];?>
<li>
<a href=“<?php echo get_permalink($post->ID) ?>“ alt=‘<?php the_title() ;?>‘>
<?php the_title();?>
</a>
</li>
<?php endwhile;?>
<div class=“clear”></div>
<?php wp_reset_query(); ?>
</ul>
</li>
<?php endforeach ?>
<div class=“clear”></div>
</ul>
</div>
</aside>
|
针对分类页面列出自定义post分类以及其下的posts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
<ul id=“list-items”>
<p>Categroy</p>
<?php
$taxonomy = ‘game_category’;
$terms = get_terms($taxonomy);
foreach($terms as $term) :
?>
<li>
<div class=“widget-categories-title”>
<a href=“<?php echo get_term_link($term->slug, $taxonomy); ?>“ title=“<?php echo $term->name; ?>“>
<?php echo $term->name; ?><i class=“icon-caret-down”></i>
</a>
</div>
<ul class=“widget-categories-children”>
<?php
//create a new custom query_posts
//get current custom post_type category
//get the slug
$get_current_slug = $term->slug;
global $wp_query;
query_posts( array(
‘post_type’ => ‘games’,
‘showposts’ => 30,
‘tax_query’ => array(
‘relation’ => ‘AND’,
array(
‘taxonomy’ => ‘game_category’,
‘field’ => ‘slug’,
‘terms’ => array(
$get_current_slug,
)
)
)
)
);
?>
<?php while ( have_posts() ) : the_post(); ?>
<li>
<a href=“<?php echo get_permalink($post->ID) ?>“ alt=‘<?php the_title()?>‘>
<?php the_title()?>
</a>
</li>
<div class=“clear”></div>
<?php endwhile; wp_reset_query(); ?>
</ul>
</li>
<?php endforeach ?>
<div class=“clear”></div>
</ul>
|
限制字数
|
<?php
echo wp_trim_words( get_the_content(), 100 ); // 文章内容
echo wp_trim_words( get_the_excerpt(), 100 ); // 文章摘要
echo wp_trim_words( get_the_title(), 100 ); // 文章标题
?>
<?php echo substr($category->description,0,160);?> //限制分类定义字数
|
QQ弹出框
qq:<a href=”http://wpa.qq.com/msgrd?v=3&uin=2755814742&site=qq&menu=yes” target=”_blank”>在线咨询</a>
杂类
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<?php foreach((get_the_category()) as $category){ echo $category->cat_name;}?> 获取当前的分类名称
single页面获取当前post的分类以及链接
<?php $cats = get_the_category();
foreach( $cats as $cat ) { ?>
<a href=“<?php echo get_category_link($cat->term_id); ?>“><?php echo $cat->name; ?></a>
<?php break;
} ?>
|
子类page获取父类page的名称以及链接
|
<a href=“<?php echo get_permalink($post->post_parent) ?>“><?php
$parent_title = get_the_title($post->post_parent);
echo $parent_title;
?></a>
|
引用百度地图
<iframe title=”上海瑞深电子科技有限公司” src=”../baidumap.html” width=”100%” height=”300″ frameborder=”0″>上海瑞深电子科技有限公司</iframe>
footer尾部
注明版权,加上工作室链接
<a href=”http://www.eastdesign.net/”>Supported by Eastern Design Studio</a>
引入引用js
|
<script src=“<?php echo get_template_directory_uri(); ?>/js/jquery.min.js”></script>
<script src=“<?php echo get_template_directory_uri(); ?>/js/bootstrap.min.js”></script>
|