1. 程式人生 > >[轉]WordPress主題開發:主題初始化

[轉]WordPress主題開發:主題初始化

alt 方法 開發 ont tom 出錯 oid div TP

本文轉自:http://www.cnblogs.com/tinyphp/p/4391182.html

在最簡單的情況下,一個WordPress主題由兩個文件構成:

index.php ------------------主模版

style.css -------------------主樣式表(註意的是兩個不同的主題是不允許擁有相同的表述 , 這樣會導致主題選擇出錯的。

簡版:

技術分享圖片
/*
Theme Name:企業主題練習
Author:tinyphp
Author URI: http://www.cnblogs.com/tinyphp/
Description: 經典企業主題
Tags: 藍色 商務
*/
技術分享圖片

完善版:

技術分享圖片
/*
Theme Name: 主題名稱
Theme URI: 主題介紹地址(如果你的主題上傳到wordpress官方資源處適用)
Author: 主題的作者
Author URI: 主題作者的網址
Description: 主題的描述
Version: 主題的版本
License: GNU General Public License v2 or later【版權說明】
License URI: http://www.gnu.org/licenses/gpl-2.0.html 【版權說明的網址】
Tags: 主題的標簽,如果你的主題上傳到官方指定處,通過此標簽可以被篩選出
Text Domain: twentythirteen【如果主題提供多國語言版本,適用】

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you‘ve learned with others.
*/
技術分享圖片

用於聲明主題名稱、主題url、主題版本、主題描述、作者、作者網址

主題安裝:

主題預覽圖:命名為 screenshot.png ,放在你的主題的根目錄下。

主題的安裝:在後臺外觀->添加主題,把.zip格式的主題上傳即可在後臺編輯。

WordPress主題安裝後,目錄位於 wp-content/themes/

或手動在wp-content/themes/下創建文件夾

引用樣式:

引用style.css

 <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />

引用某個樣式方法1

<link rel="stylesheet" href="<?php bloginfo(‘template_url‘);?>css/mystyle.css" type="text/css" media="screen" />

引用某個樣式方法2

<?php
wp_enqueue_style( ‘init_style‘,get_bloginfo(‘template_url‘).‘/css/mystyle.css‘);
?>

目錄說明:

404.php 404頁面模板
rtl.css 如果網站的閱讀方向是自右向左的,會被自動包含進來
comments.php 評論模板
single.php 文章模板。顯示單獨的一篇文章時被調用,如果模板不存在會使用 index.php
single-<post-type>.php 自定義單獨頁面模板如: single-books.php 展示自定義文章類型為 books的文章,如果模板不存在會使用 index.php
page.php 頁面模板
category.php 分類目錄模板
tag.php 標簽模板
taxonomy.php 術語模板。請求自定義分類法的術語時使用
author.php 顯示作者資料模板
date.php 顯示按日期/時間歸檔的模板
archive.php 顯示某條件下的歸檔,如果category.php存在則使用category.php
search.php 搜索結果模板
attachment.php 查看單個附件時使用的模板
image.php 圖片附件模板,查看單個圖片時將調用此模板,如果不存在此模板,則調用attachment.php 模板
sidebar.php 側邊欄模板
header.php 頁眉模板
footer.php 頁腳模板
functions.php 擴展功能配置文件

基本首頁:index.php

技術分享圖片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
       <?php wp_head(); ?>
</head>
<body>
    <?php wp_footer(); ?>
</body>
</html>
技術分享圖片

升級頭部(header.php)

技術分享圖片
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo( ‘charset‘ ); ?>" />
        <title><?php wp_title(); ?></title>
        <meta name="description" content="<?php bloginfo( ‘description‘ ); ?>">
        <link rel="profile" href="http://gmpg.org/xfn/11" />
        <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
        <link rel="pingback" href="<?php bloginfo( ‘pingback_url‘ ); ?>" />
        <?php if ( is_singular() && get_option( ‘thread_comments‘ ) ) wp_enqueue_script( ‘comment-reply‘ ); ?>
        <?php wp_head(); ?>
    </head>
技術分享圖片

<html> 開始標簽應該包含 language_attributes()

使用 bloginfo() 設置 <meta> 字符集和description元素

使用 wp_title() 設置 <title> 元素

使用 get_stylesheet_uri() 來獲取當前主題的樣式表文件

使用 Automatic Feed Links 添加 feed 鏈接

需添加聲明 wp_head() 到 </head> 結束標簽的前面

[轉]WordPress主題開發:主題初始化