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="16x16 24x24 32x32 48x48"> <link rel="apple-touch-icon-precomposed" type="image/png" href="/apple-icon.png" sizes="114x114"> <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
<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
<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
<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>