wordpress自定義主題
技術標籤:wordpress
wordpress自定義主題
1.什麼是主題?
我理解的是一套網站的風格模板就是主題,wordpress上提供了許多專業好看的主題,但我們如果自己有另外的需求需要按照自己的頁面樣式來製作網頁的話就可以使用自定義主題。
2.如何製作自定義主題?
完整的主題我們需要這幾個檔案:
//最最最基礎的我們可以先建立紅色標出來的檔案感受一下自定義主題
style.css 樣式表文件
index.php 主頁檔案
single.php 日誌單頁檔案
page.php 頁面檔案
archvie.php 分類和日期存檔頁檔案
searchform.php 搜尋表單檔案
search.php 搜尋頁面檔案
404.php 404 錯誤頁面
header.php 網頁頭部檔案
sidebar.php 網頁側邊欄檔案
footer.php 網頁底部檔案
下面是引用部落格園一位大佬的部落格
下圖就是 WordPress 的層次結構,它簡單的向你展示,一旦你主題中的某個檔案丟失了,WordPress 主題系統將會使用其他什麼模板檔案來代替。
我們可以通過上面這張圖中模板檔案所處的位置來知道各個主題檔案的重要性,越靠左越重要。
WordPress 利用這個層次結構去尋找相應的模板檔案顯示頁面,並且在相應的檔案丟失之後如何處理。
比如 archive.php 模板檔案(用來顯示存檔頁面)丟失了,那麼 WordPress 將會使用 index.php 來控制存檔頁面如何顯示。
比如 single.php 模板檔案丟失了,它會尋找 index.php。
2.1建立style.css、index.php
2.2在style.css中寫入這幾個屬性,填你自己的資訊,這樣我們在儀表盤中就可以看見自定義主題的資訊(例:版本、作者、描述...)
/*
Theme Name:aaa
Theme URL:http://localhost:8080/wordpress/
version:1.0
author:yps
Tages:........
description:歡迎來到尹尹自定義主題~
License:
*/
2.3在index.php檔案中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <title> <?php wp_title(); ?> <?php bloginfo('name'); ?> </title> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php wp_get_archives('type=monthly&format=link'); ?> <?php //comments_popup_script(); // off by default ?> <?php wp_head(); ?> </head> <body> </body> </html>
3.這個時候我們訪問我們的自定義主題可以看到一片空白,這樣就ok了,可以開始自定義你所需要的網頁了。