2015年10月1日星期四

WordPress主题制件笔记 (wordpress花园教程)

自定义字段插件:Advanced CustomFields

自定义联系表单插件:Contact Form 7

自定义文章类型插件:Custom Post Type UI

发邮件插件:WP-MAIL-SMTP

自定义文章页面:single-fxd.php

内容模版: template-parts/content.php(content-fxd.php,content-zidingyi.php)



MobilePress 插件待测

MobilePress插件是一款自动识别访问设备的插件,它可以根据用户的设备来决定以什么样的主题来呈现内容,非常方便。


调用内容模版:





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

  2. <?php get_template_part( 'template-parts/content', 'single' ); ?>

  3. //这里是指调用template-parts/content-single.php文件;

  4. <?php endwhile; // End of the loop.

  5. else: ?>

  6. <?php get_template_part( 'template-parts/content', 'none' ); ?>








自定义模块:module/fxd.php;

调用模块:include(locate_template('module/pagination.php'));

自定义页面page: page-fxd.php;


1、查看当前调用的文件

在wp-includes\template-loader.php文件中加入3行代码:












1

2

3



if($_GET[tpl]=='die'){

die($template);

}






然后在地址中添加一个参数tpl=die就可以查看当前使用的文件; 



 

wordpress模版结构图:

 

 

 

 



 


1.创建头文件header.php;

记得添加wp_head();

</head>之前;


2.创建脚步文件footer.php;

记得添加wp_footer();

</body>之前;


3.javascript文件的两种引入方式;

方式1:

<script src="<?php bloginfo('template_url');?>/js/jquery.js"></script>

(一般可行)

方式2:

wp_enqueue_script( 'init_js',get_bloginfo('template_url').'/js/init.js');

(更专业)

4.css文件的两种引入方式;

方式1:

<link rel="stylesheet" href="<?php bloginfo('template_url');?>/css/style-wide.css" />

(一般可行)

方式2:

wp_enqueue_style( 'init_style',get_bloginfo('template_url').'/css/mystyle.css');

(更专业)


5.通过get_header();get_footer();包含头尾文件;


6.bloginfo('template_url');会输出模板地址的绝对路径


7.注意将所有的资源文件(图片,js文件,css文件)进行路径替换;(大家出现问题最多的就是这里!!!)


 

 

自定义循环查询





  1. <?php

  2. $args=array(

  3. 'post_type'=>'page',//查找出所有页面(多个结果集,复数)

  4. 'page_id'=>16//仅仅查询id号为16的页面,只有一个结果,单数

  5. );

  6. // 实例化wp_query

  7. $the_query = new WP_Query( $args );


  8. // 开始循环

  9. if ( $the_query->have_posts() ) {//如果找到了结果,便输出以下内容


  10. while ( $the_query->have_posts() ) {//再次判断是否有结果

  11. $the_query->the_post();//不用问为什么,每次都要写这个;

  12. //这里开始输出你想要的模板标签

  13. ?>


  14. <div class="col col_1_3">

  15. <div class="inner">

  16. <h2><?php the_title();?></h2>

  17. <p><?php the_content();?></p>

  18. <a href="<?php the_permalink();?>" class="link-more">more details</a> </div>

  19. </div>



  20. <?php

  21. }


  22. } else {

  23. // 如果没有找到任何结果,就输出这个

  24. }


  25. wp_reset_postdata();//不用问为什么,每次都记得写就好

  26. ?>




循环调用文章类型为post的文章,这里只输出了标题





  1. <?php

  2. $args = array('post_type'=>'post');

  3. // The Query

  4. $the_query = new WP_Query( $args );


  5. // The Loop

  6. if ( $the_query->have_posts() ) {

  7. echo '<ul>';

  8. while ( $the_query->have_posts() ) {

  9. $the_query->the_post();

  10. echo '<li>' . get_the_title() . '</li>';

  11. }

  12. echo '</ul>';

  13. } else {

  14. // no posts found

  15. }

  16. /* Restore original Post Data */

  17. wp_reset_postdata();

  18. ?>





调用顺序:

定义查询范围(如post_type)再执行查询WP_Query($args);    再找到the_post(); 再调用它的 the_title(); the_content(); the_permalink(); 等等;

标签调用的格式为 the_tag()和 get_the_tag();



the_yourtag()会直接把标签内容输出到html上面;

get_the_yourtag()会把标签内容保存到一个变量中,以供稍后的使用;


常用的标签有:




  1. <!--?php the_content(); ?--> 日志内容

  2. <!--?php the_title(); ?--> 显示一篇日志或页面的标题

  3. <!--?php the_permalink() ?--> 显示一篇日志或页面的永久链接/URL地址

  4. <!--?php the_category(',') ?--> 显示一篇日志或页面的所属分类

  5. <!--?php the_author(); ?--> 显示一篇日志或页面的作者

  6. <!--?php the_ID(); ?--> 显示一篇日志或页面的ID

  7. <!--?php edit_post_link(); ?--> 显示一篇日志或页面的编辑链接

  8. <!--?php next_post_link('%link') ?--> 下一篇日志的URL地址

  9. <!--?php previous_post_link('%link') ?--> 上一篇日志的URL地址






Wordpress 的默认循环

 

wordpress会根据【链接结构】来进行数据的查询,

和定自义循环不同,默认循环直接从while开始,不用定义查询参数




  1. <?php


  2. // single.php 一般文章页面

  3. // Start the loop.

  4. while ( have_posts() ) : the_post();


  5. /*

  6. * Include the post format-specific template for the content. If you want to

  7. * use this in a child theme, then include a file called called content-___.php

  8. * (where ___ is the post format) and that will be used instead.

  9. */

  10. get_template_part( 'content', get_post_format() );


  11. // If comments are open or we have at least one comment, load up the comment template.

  12. if ( comments_open() || get_comments_number() ) :

  13. comments_template();

  14. endif;


  15. // Previous/next post navigation.

  16. the_post_navigation( array(

  17. 'next_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Next', 'twentyfifteen' ) . '</span> ' .

  18. '<span class="screen-reader-text">' . __( 'Next post:', 'twentyfifteen' ) . '</span> ' .

  19. '<span class="post-title">%title</span>',

  20. 'prev_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Previous', 'twentyfifteen' ) . '</span> ' .

  21. '<span class="screen-reader-text">' . __( 'Previous post:', 'twentyfifteen' ) . '</span> ' .

  22. '<span class="post-title">%title</span>',

  23. ) );


  24. // End the loop.

  25. endwhile;

  26. ?>






  1. <?php

  2. // Start the loop.

  3. while ( have_posts() ) : the_post();


  4. // Include the page content template.

  5. get_template_part( 'content', 'page' );


  6. // If comments are open or we have at least one comment, load up the comment template.

  7. if ( comments_open() || get_comments_number() ) :

  8. comments_template();

  9. endif;


  10. // End the loop.

  11. endwhile;

  12. ?>






新建页面的2种方法:

自定义page文件命名的方式为:page-id.php   page-feng.php

默认page文件为:page.php

 

方法1.创建一个新的模板文件




  1. <?php

  2. /*

  3. *Template Name : New Template

  4. */

  5. //And start to write your code here...

  6. //然后这里写你的循环程序

  7. ....

  8. ...

  9. .

  10. ?>





【方法2.创建page-$id.php文件】
这样的文件,因为是通过id直接定位对应的页面(page)模板,所以方法1中的代码可以省略不写。


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

没有评论:

发表评论