隽永东方基于WordPress的基本开发手册

最后更新： 2年之前在隽永东方内训教程标签： WordPress开发手册 212 // 评论数 // 参与数

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兼容内核，增加标签：

若页面需默认用ie标准内核，增加标签：

若页面需默认用极速核，增加标签

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(); ?>是为了获取远程服务器中相应目录文件夹中的内容

<?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; ?>

<?php while ( have_posts() ) : the_post(); ?>

<?php the_content(); ?>

<?php endwhile; ?>

面包屑

<div class="breadcrumb">

<?php if(function_exists('bcn_display'))

{

bcn_display();

}?>

</div><!-- .breadcrumb -->

<?php if(function_exists('bcn_display'))

{

bcn_display();

}?>

</div>

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>

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

</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>

<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>

<a href="<?php echo get_category_link( $category->term_id ) ?>" title="<?php echo $category->name ?>">

<?php echo $category->name ?>

</a>

</div>

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

<?php the_title();?>

</a>

</li>

<?php endwhile;?>

<?php wp_reset_query(); ?>

</ul>

</li>

<?php endforeach ?>

</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>

<p>Categroy</p>

<?php

$taxonomy = 'game_category';

$terms = get_terms($taxonomy);

foreach($terms as $term) :

<li>

<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>

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

<?php the_title()?>

</a>

</li>

<?php endwhile; wp_reset_query(); ?>

</ul>

</li>

<?php endforeach ?>

</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);?> //限制分类定义字数

<?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;

} ?>

<?php foreach((get_the_category()) as $category){ echo $category->cat_name;}?> 获取当前的分类名称

single页面获取当前post的分类以及链接

<?php $cats = get_the_category();

foreach( $cats as $cat ) { ?>

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

<a href="<?php echo get_permalink($post->post_parent) ?>"><?php

$parent_title = get_the_title($post->post_parent);

echo $parent_title;

?></a>

引用百度地图

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>

作者： Fans