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>
杂类
| <?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> |