1. 程式人生 > >Wordpress主題製作基礎教程

Wordpress主題製作基礎教程

首先你要去官網下載並安裝好wordpress,官方網站:https://cn.wordpress.org/
然後你要製作好你的網站所有頁面的靜態頁
都做好後,就可以開始製作主題了

第一步:建立你的主題標記

1、新建一個style.css,放在你的主題包根目錄下,內容如下:

/*
Theme Name: 你的主題名稱,隨便起
Theme URI: 你的官方網站網址
Description: 你的主題描述文字
Version: 版本號
Author: 作者的名稱  
Author URI: 作者的網站網址
Tags: 隨便起個標籤名字
*/

這個css檔案起到的作用就是在後臺的主題選單裡面顯示你的主題名字

2、做一張300x225尺寸的PNG圖片當作你的主題縮圖,名字叫 screenshot.png

3、把你做好的靜態頁以及相關資原始檔都放到主題資料夾內複製到 wp-content\themes\ 目錄內

4、把 index.html 改名為 index.php ,然後修改頭部的css等檔案連結地址,比如改為:

<link href="<?php bloginfo('template_url'); ?>/css/index.css" rel="stylesheet" type="text/css">

這裡面:<? php bloginfo('template_url'); ?>

就是讀取模板所在目錄的URL地址,再加上你後邊寫的css檔案的存放目錄,就能正確顯示你的css檔案了

第二步:製作常用的主題模板檔案

1、把 index.html 裡面共用的頭部和尾部摳出來,分別存為 header.php 和 footer.php,注意修改裡面的資源連結地址,改為動態獲取的當前模板路徑:

<?php bloginfo('template_url'); ?>

2、把 index.php 頁面裡面需要呼叫頭部或尾部的地方用php程式碼獲取:

<?php get_header(); ?>
<?php get_footer(); ?>

3、修改header.php頭部的一些程式碼,改為動態獲取,比如:

<title><?php bloginfo('name'); ?></title>

↑ 把title改為呼叫後臺配置的文字,還有 bloginfo(‘description’); 網站描述

<link href="<?php bloginfo('template_url'); if (is_home()) {echo '/css/index.css';} else {echo '/css/page.css';} ?>" rel="stylesheet" type="text/css">

↑判斷當前顯示的頁面是否為首頁 “is_home()”如果是首頁就顯示 index.css ,如果不是就顯示 page.css

列出幾個常用的判斷:
is_home():當前頁面為主頁時返回true
is_category():當前頁面為分類頁時返回true
is_single():當前頁面為單文章頁時返回true
is_page():當前頁面為單頁面時返回true,多個頁面判斷方法: “is_page(array(‘help’,’help-zjsla’,’help-ypsla’))”

4、製作預設的文章分類頁模板“category.php”

把你已經做好的分類頁的html模板重新命名為 category.php ,引入頭部和尾部,如果有側邊欄,同樣也可以引入,這樣文章分類頁基本就做好了,例如:

<?php get_header(); ?>
<?php get_footer(); ?>
<?php get_sidebar(); ?>

()括號裡面可以寫一些引數,比如你有多個header就可以寫get_header(1)、get_header(a),對應的php檔案就是 header-1.php,header-a.php,其他同理。

如果你有多個分類,可以在 category.php 後邊加上 - 分隔符,例如:category-activities.php

接下來是顯示指定分類目錄下的文章,並顯示文章縮圖,這個縮圖功能要首先在 functions.php 頁面裡增加一段程式碼後才能呼叫,後邊有單獨介紹。

① 顯示指定分類下的文章列表,搭配縮圖

<!--開啟主迴圈查詢-->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); //主迴圈 ?>
<li>
    <!--呼叫縮圖開始-->
    <?php if ( has_post_thumbnail() ) : ?>
        <?php the_post_thumbnail(); ?>
    <?php else: ?>
        <img src="<?php bloginfo('template_url'); ?>/images/xxxxxx.jpg" width="370" height="171" alt="">
    <?php endif; ?>
    <!--呼叫縮圖結束-->
    <h4 class="am-text-center"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
</li>
<?php endwhile; endif; ?>
<!--關閉主迴圈查詢-->

如果你想顯示日期,可以使用 “get_the_date()”函式。

5、製作預設的文章內容顯示頁模板 “single.php”

① 把你已經做好的文章內容頁的html模板重新命名為 single.php ,並替換裡面的頭部和尾部模板。
② 在文章標題處填寫動態獲取程式碼:

<?php the_title(); ?>

③ 在發表時間處填寫動態獲取程式碼:

<?php the_time('Y年-n月-j日') ?>

④ 在文章內容處,必須先寫上主迴圈程式碼,然後才能加入文章內容獲取程式碼,例如:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <?php the_content(); ?>
<?php endwhile; endif; ?>

the_post() 函式被呼叫之後,我們就可以使用許多模板函式和全域性變數,以下是獲取文章的一些屬性方法:

  • the_author:獲取作者的名字。
  • the_title:顯示當前日誌的標題。
  • the_content:顯示日誌的內容。
  • the_permalink:顯示日誌的永久連結的 URL。
  • the_ID:顯示日誌的 ID。

6、製作文章頁的側邊欄 “sidebar.php”

① 把你已經做好的文章內容頁側邊欄div程式碼摳出來,新建一個php檔案命名為 sidebar.php,把摳出來的程式碼貼上進去。

② 修改迴圈列表處的程式碼如下:

    <ul class="aside-list-news">
        <!--文章主迴圈查詢開始-->
        <?php
            query_posts('showposts=3&cat=1'); //showposts顯示數量,cat指定分類目錄
            if(have_posts()) : while (have_posts()) : the_post(); //主迴圈
        ?>
        <li>
            <figure>
                <!--縮圖查詢開始-->
                <?php if ( has_post_thumbnail() ) : ?>
                    <?php the_post_thumbnail(); ?>
                <?php else: ?>
                    <img src="<?php bloginfo('template_url'); ?>/images/xxxxxxx.jpg" width="370" height="171" alt="">
                <?php endif; ?>
                <!--縮圖查詢結束-->
                <figcaption><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></figcaption>
            </figure>
        </li>
        <?php  endwhile; endif; ?>
        <!--文章主迴圈查詢結束-->
    </ul>

如果你想顯示日期,可以使用 “get_the_date()”函式。

7、新建一個函式庫檔案 “functions.php”

裡面寫一些必要的函式,比如你想給釋出的文章搭配一個縮圖,就需要在functions.php裡面增加一段程式碼:

<?php
    add_theme_support( 'post-thumbnails' ); 
?>

這樣你釋出文章的時候就可以新增縮圖了