wordpress 主题教程-笔记

乌杰

2023-12-01

前言：代码参考，如无特别说明，下面所说的文件，都在主题目录下。

https://blog.wpjam.com/m/wp-theme-lesson-3-starting-indexphp/

https://github.com/laughing2/wp-theme-tutorial

主题制作步骤

1. 制作好前端页面

2. 在你本地安装的 WordPress 主题文件夹下（应该在 wordpress/wp-content/themes），创建一个新的文件夹，命名为你的主题名比如 ( mystyle)。

3. 上传 index.php （前端首页, 包括所引入的文件,如css、js的文件，都原来的相对路径，放在主题目录下，这里是 mystyle )

修改原来的相对路径 ( 将原来的相对路径添加前缀代码 <?php bloginfo('template_url');?>/ )

4. 上传 style.css ( wordpress 主题样式)

5. 把index.php 页头部份，制作成 header.php ，并上传。

6. index.php 文件，用 <?php get_header(); ?> ，将页头部份引入。

7. 把index.php 页脚部份，制作成 footer.php ，并上传。

8. index.php 文件，用 <?php get_footer(); ?> ，将页脚部份引入。

9.首页常用函数

9.1 显示某个分类的名称注： $my_index_a1_cat 为分类的 ID

<?php $my_index_a1_cat = 6;?>

<?php  echo get_cat_name($my_index_a1_cat); ?>

9.2 某个分类列表链接

<?php echo get_category_link($my_index_a1_cat);?>

9.3 显示某个分类前5篇文章如：分类ID为6，的前5篇文章

<?php $posts = get_posts( "category=6&numberposts=5" ); ?>
<?php if( $posts ) : ?>
<ul><?php foreach( $posts as $post ) : setup_postdata( $post ); ?>
<li class="my-index-arlist-paddingtop">
<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><?php ODD_title(31); ?></a>
</li>
<div class="my-xuxian"></div>
<?php endforeach; ?>
</ul>
<?php endif; ?>

9.4 自定义显示标题的字数。注：在主题的 functions.php 文件中添加，方便其他地方调用。

//自定义显示文章标题的字数长度
//然后在需要调用文章标题的地方使用下面的代码即可：
//<!--?php ODD_title(20); ?-->
function ODD_title($char) {
         $title = get_the_title($post->ID);
         //$title = substr($title,0,$char);
         //$title = mb_substr($title,0,$char,'utf-8');
         $content_str = $title;
		 $title = mb_substr($title,0,$char,'utf-8');
		 if (mb_strlen($content_str,'utf-8') > $char ) {
			$title = mb_substr($title,0,$char,'utf-8').'…';
		 }
         echo $title;
}

9.5 更多链接。注：这里更多，指向某个分类的文章列表

<div class="my-index-more"><a href="<?php echo get_category_link($my_index_a1_cat);?>" >[更多]</a> </div>

9.6 显示某一篇文章的标题和链接

<h2><a href="<?php echo get_permalink(152); ?>"><?php echo get_post($index_id)->post_title; ?></a></h2>

9.7 显示某一篇文章的内容。注：这里没有用到 functions.php

<p>
  <?php query_posts( 'showposts=5&p=152'); ?>
    <?php while (have_posts()) : the_post(); ?>
      <?php 
        //the_content(); 
        the_excerpt(); 
        //echo mb_strimwidth(strip_tags(apply_filters( 'the_content', the_content()), 0, 20, "...")); 
        ?>
        <?php endwhile;wp_reset_query();?>
</p>

10. functions.php 常用功能

<?php
//让WordPress首页自动显示文章第一张图片 spricamacuk
function catch_that_image() {
      global $post, $posts;
      $first_img = '';
      ob_start();
      ob_end_clean();
      $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
      $first_img = $matches [1] [0];
      if(empty($first_img)){ //Defines a default image
        $first_img = "images/default.jpg";
      }
      return $first_img;
 }

//自定义显示文章标题的字数长度
//然后在需要调用文章标题的地方使用下面的代码即可：
//<!--?php ODD_title(20); ?-->
function ODD_title($char) {
         $title = get_the_title($post->ID);
         //$title = substr($title,0,$char);
         //$title = mb_substr($title,0,$char,'utf-8');
         $content_str = $title;
		 $title = mb_substr($title,0,$char,'utf-8');
		 if (mb_strlen($content_str,'utf-8') > $char ) {
			$title = mb_substr($title,0,$char,'utf-8').'…';
		 }
         echo $title;
}


//控制wordpress博客首页博文显示内容字数
function Excerpt_Content($max_length,$content_id) {
// $title_str = get_the_title();
// $content_str = get_post( $content_id )->post_content;
$content_str =	get_post( $content_id )->post_excerpt;
if (mb_strlen($content_str,'utf-8') > $max_length ) {
$content_str = mb_substr($content_str,0,$max_length,'utf-8').'…';
}
return $content_str;
}
?>

11. 404页

<?php get_header(); ?>
  <div class="campl-row campl-content campl-recessed-content">
    <div class="campl-wrap clearfix">
      <div class="campl-column9 campl-main-content">
        <h1 class="page-title" style="text-align: center">
          <?php _e( '404!页面找不到. ', 'spricamacuk' ); ?></h1>
        <!--<p><?php _e( '页面找不到. 重新搜索?', 'spricamacuk' ); ?></p>
        <?php get_search_form(); ?>
        -->
        <p>
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <br /></p>
      </div>
    </div>
  </div>
  <!-- footer -->
  <?php get_footer(); ?>

12. 文章归档 (archive.php)

<?php get_header(); ?>
  <div class="campl-row campl-content campl-recessed-content">
    <div class="campl-wrap clearfix">
      <div class="campl-column9 campl-main-content">
        <!-- 输入主循环代码 -->
        <?php query_posts( 'showposts=10&cat=6'); ?>
          <?php if(have_posts()) : ?>
            <h1>
              <?php echo single_cat_title( '', false ); ?></h1>
            <?php while(have_posts()) : the_post(); ?>
              <div class="post" id="post-<?php the_ID();?>">
                <li style="padding-top:3px;font-size:18px;line-height: 50px;">
                  <a href="<?php the_permalink(); ?>" target="_blank">
                    <?php the_title();?>
                      <?php the_time( 'Y-m-d'); ?></a>
                </li>
              </div>
              <?php endwhile; ?>
                <?php else : ?>
                  <div class="post">
                    <h2>
                      <?php _e( 'Not Found'); ?></h2>
                  </div>
                  <?php endif; ?></div>
      <style>.homepage .campl-recessed-secondary-content { margin-top: -5%; }</style>
      <div class="campl-column3 campl-secondary-content campl-recessed-secondary-content">
        <!-- sidebar -->
        <?php get_sidebar(); ?></div>
    </div>
  </div>
  <!-- 底部 -->
  <?php get_footer(); ?></div>
    </body>
    
    </html>

13. 分类目录模板 (category.php)

<?php get_header(); ?>
  <div class="campl-row campl-content campl-recessed-content">
    <div class="campl-wrap clearfix">
      <div class="campl-column9 campl-main-content">
        <!-- 输入主循环代码 -->
        <?php if(have_posts()) : ?>
          <?php $category=g et_the_category(); ?>
            <h1>
              <?php echo $category[0]->cat_name; ?></h1>
            <?php while(have_posts()) : the_post(); ?>
              <div class="post" id="post-<?php the_ID();?>">
                <h2>
                  <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                    <?php the_title(); ?></a>
                </h2>
                <div class="entry">
                  <?php the_excerpt(); ?></div>
              </div>
              <?php endwhile; ?>
                <?php else : ?>
                  <div class="post">
                    <h2>
                      <?php _e( 'Not Found'); ?></h2>
                  </div>
                  <?php endif; ?></div>
      <style>.homepage .campl-recessed-secondary-content { margin-top: -5%; }</style>
      <div class="campl-column3 campl-secondary-content campl-recessed-secondary-content">
        <!-- sidebar -->
        <?php get_sidebar(); ?></div>
    </div>
  </div>
  <!-- 底部 -->
  <?php get_footer(); ?>

14. 单独页面 (page.php)

<?php get_header(); ?>
  <div id="container">
    <!-- 输入主循环代码 -->
    <?php if(have_posts()) : ?>
      <?php while(have_posts()) : the_post(); ?>
        <div class="post" id="post-<?php the_ID();?>">
          <h2>
            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
              <?php the_title(); ?></a>
          </h2>
          <div class="entry">
            <?php the_content(); ?>
              <!-- 定制 page.php -->
              <?php link_pages( '<strong>Pages:</strong>', '', 'number'); ?>
                <?php edit_post_link( 'Edit', '', ''); ?></div>
        </div>
        <?php endwhile; ?>
          <?php else : ?>
            <div class="post">
              <h2>
                <?php _e( 'Not Found'); ?></h2>
            </div>
            <?php endif; ?></div>
  <?php get_sidebar(); ?>
    <!-- 底部 -->
    <?php get_footer(); ?></div>
      </body>
      
      </html>

15. 搜索结果 (search.php)

<?php get_header(); ?>
  <div class="campl-row campl-content campl-recessed-content">
    <div class="campl-wrap clearfix">
      <div class="campl-column9 campl-main-content">
        <!-- 输入主循环代码 -->
        <?php if(have_posts()) : ?>
          <?php while(have_posts()) : the_post(); ?>
            <div class="post" id="post-<?php the_ID();?>">
              <h2>
                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                  <?php the_title(); ?></a>
              </h2>
              <div class="entry">
                <?php the_excerpt(); ?></div>
            </div>
            <?php endwhile; ?>
              <?php else : ?>
                <div class="post">
                  <h2>
                    <?php _e( 'Not Found'); ?></h2>
                </div>
                <?php endif; ?></div>
      <style>.homepage .campl-recessed-secondary-content { margin-top: -5%; }</style>
      <div class="campl-column3 campl-secondary-content campl-recessed-secondary-content">
        <!-- sidebar -->
        <?php get_sidebar(); ?></div>
    </div>
  </div>
  <!-- 底部 -->
  <?php get_footer(); ?></div>
    </body>
    
    </html>

16. 搜索框 (searchform.php)

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
  <div>
    <input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" size="15" />
    <br />
    <input type="submit" id="searchsubmit" value="Search" /></div>
</form>

17. 文章页面 (single.php)

<?php get_header(); ?>
  <div class="campl-row campl-content campl-recessed-content">
    <div class="campl-wrap clearfix">
      <div class="campl-column9 campl-main-content">
        <?php if(have_posts()) : ?>
          <?php while(have_posts()) : the_post(); ?>
            <div class="campl-content-container campl-sub-column-right-border">
              <h2>
                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                  <?php the_title(); ?></a>
              </h2>
              <p>
                <?php the_content(); ?>
                  <?php link_pages( '<strong>Pages:</strong>', '', 'number'); ?></p>
            </div>
            <?php endwhile; ?>
              <?php else : ?>
                <div class="post">
                  <h2>
                    <?php _e( 'Not Found'); ?></h2>
                </div>
                <?php endif; ?></div>
      <style>.homepage .campl-recessed-secondary-content { margin-top: -5%; }</style>
      <div class="campl-column3 campl-secondary-content campl-recessed-secondary-content">
        <!-- sidebar -->
        <?php get_sidebar(); ?></div>
    </div>
  </div>
  <!-- footer -->
  <?php get_footer(); ?>

X. 更新目录权限 chmod -R 777 wordpress

参考: https://jingyan.baidu.com/article/fd8044fa2e7af35031137af2.html

wordpress 主题教程-笔记

相关阅读

相关文章

相关问答

相关文档