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'); ?>
第二步:製作常用的主題模板檔案
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' );
?>
這樣你釋出文章的時候就可以新增縮圖了