【wordpress】wordpress自定义主题

wordpress每个主题至少要有这两个文件 – style.css 和 index.php

  index.php 告诉主题中所有的元素如何布局;

  style.css 则告诉主题中所有的元素该如何展示,以及它们的样式。



几个名词:

Template(模板)

  其实就是一个代码集,主题中很多地方会利用到这个代码集,所以把它们整合成一个模板,这样就就不必一遍遍输入这些重复代码。

Template file(模板文件)

  一个包含一个或者多个代码集(模板)文件。每个主题是由多个模板文件组成的,比如:index.php,style.css,sidebar.php 等等。

Theme(主题)或者 WordPress theme(WordPress 主题)

  所有你正在使用的文件:文本,图像,代码等等。注意: WordPress theme(主题)和 WordPress template(s)(模板)是两个不同的东西,尽管有些人认为他们一样。

Post(日志或者文章)

   它是你 blog 的一个简单的条目,如:一个页面或者一篇日记。

Page(静态页面)

  一种特殊的 post,它不是以分类组织的。它有别于你其他的日志。注意:在 WordPress,page(页面)和 Page(静态页面)是两种不同的东西。



一个完整的主题含有的文件列表:

  style.css

  index.php

  home.php

  single.php

  page.php

  archive.php

  category.php

  search.php

  404.php

  comments.php

  comments-popup.php

  author.php

  date.php

下图就是 WordPress 的层次结构,它简单的向你展示,一旦你主题中的某个文件丢失了,WordPress 主题系统将会使用其他什么模板文件来代替。

  我们可以通过上面这张图中模板文件所处的位置来知道各个主题文件的重要性,越靠左越重要。

  WordPress 利用这个层次结构去寻找相应的模板文件显示页面,并且在相应的文件丢失之后如何处理。

  比如 archive.php 模板文件(用来显示存档页面)丢失了,那么 WordPress 将会使用 index.php 来控制存档页面如何显示。

  比如 single.php 模板文件丢失了,它会寻找 index.php。



WordPress 博客的每个页面由多个模板文件组成的:

首页页面:

在上图中,我们可以看出主题的 index.php 是由 4 个模板文件组成:header.phpindex.phpsidebar.php 和 footer.php

单一日志页面:

这时候页面将会包含这四个模板文件:header.phpsingle.phpsidebar.php 和 footer。

Header 模板文件

  通常在这个文件中包含博客的标题(title)和描述(description)。而且它们通常在整个博客中都是一样的。

Index 模板文件:

  这个模板文件包含你的日志的标题日志的内容(就是每篇日志的文本和图片)和日志元数据(元数据是每篇日志的额外信息,如作者是谁,日志发布的时间,在哪个分类下,有多少留言等等)。

Sidebar 模板文件

  这个模板文件主要用于控制博客的页面列表类别列表存档列表友情链接列表其他一些列表

Footer 模板文件:

  像 header.php 模板文件一样,footer.php 通常不会因为页面的改变而改变,你可以在这里放置任何东西,但是通常是版权信息




接下来,尝试建立一个最简单的主题页面。

首先,在wordpress/wp-content/themes下建立一个文件夹myThemes,这是主题文件夹。

在myThemes文件夹下,新建index.php和style.css两个文件。

index.php内容:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4
 5 <head profile="http://gmpg.org/xfn/11">
 6
 7
 8
 9     <title><?php bloginfo(‘name‘); ?><?php wp_title(); ?></title>
10
11
12
13     <meta http-equiv="Content-Type" content="<?php bloginfo(‘html_type‘); ?>; charset=<?php bloginfo(‘charset‘); ?>" />
14
15     <meta name="generator" content="WordPress <?php bloginfo(‘version‘); ?>" /> <!-- leave this for stats please -->
16
17
18
19     <link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url‘); ?>" type="text/css" media="screen" />
20
21     <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo(‘rss2_url‘); ?>" />
22
23     <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo(‘rss_url‘); ?>" />
24
25     <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo(‘atom_url‘); ?>" />
26
27     <link rel="pingback" href="<?php bloginfo(‘pingback_url‘); ?>" />
28
29
30
31     <?php wp_get_archives(‘type=monthly&format=link‘); ?>
32
33     <?php //comments_popup_script(); // off by default ?>
34
35     <?php wp_head(); ?>
36
37 </head>
38
39 <body>
40
41 </body>
42
43 </html>

其中,wordpress函数bloginfo():

显示你的博客信息,大部分都是显示WordPress管理界面的 用户资料 和 常规设置 中的信息。它可以在模板文件的任何地方使用。一般 bloginfo() 都是用来直接在浏览器中输出内容的。如果你需要在PHP中返回值的话,那么请用 get_bloginfo()。

用法:

1 <?php bloginfo=($show) ?>

$show (字符串string) (可选)你需要输出的信息的关键词。默认: ‘name‘

  • name‘ - 显示在 设置 > 常规 中设置的“站点标题”。 该数据是从 wp_options 这个数据表中检索到的 "blogname"记录。
  • description‘ - 显示在 设置 > 常规 中设置的“副标题”。该数据是从 wp_options 这个数据表中检索到的 "blogdescription" 记录。
  • wpurl‘ - 显示在 设置 > 常规 中设置的 “WordPress 地址 (URL)”。该数据是从 wp_options 这个数据表中检索到的 "siteurl" 记录。 可以考虑使用 site_url() 来代替,尤其是在使用 子目录路径方式,而不是使用 子域名 来配置多站点时(bloginfo将返回根网站的URL,而不是子站点的URL)。
  • siteurl‘ / ‘url‘ - 显示在 设置 > 常规 中设置的 “站点地址(URL)”)”。该数据是从 wp_options 这个数据表中检索到的 "home"记录。 可以考虑使用 home_url() 代替。
  • ‘admin_email‘ - 显示在 设置 > 常规 中设置的 “电子邮件地址”。该数据是从 wp_options 这个数据表中检索到的 "admin_email"记录。
  • ‘charset‘ - 显示在 设置 > 常规 中设置的“页面和feed的编码”。该数据是从 wp_options 这个数据表中检索到的"blog_charset" 记录。(注:3.5.1+好像已经没有这个选项了)
  • ‘version‘ - 显示你当前使用的 WordPress 版本。该数据是在 wp-includes/version.php 检索到的 $wp_version  这个字段的值。
  • ‘html_type‘ - 显示WordPress HTML 页面中的内容类型(默认: "text/html")。该数据可以从 wp_options 这个数据表中检索到的 "html_type" 记录。主题和插件可以通过使用 pre_option_html_type 过滤器覆盖默认值。
  • ‘text_direction‘ - 显示 WordPress HTML 页面的文本方向。可以考虑使用 is_rtl() 代替。
  • ‘language‘ - 显示WordPress的语言。
  • ‘stylesheet_url‘ - 显示当前使用的主题的 CSS文件(通常为 style.css)路径。可以考虑使用 get_stylesheet_uri() 代替。
  • ‘stylesheet_directory‘ - 显示当前使用的主题的样式表路径。可以考虑使用 get_stylesheet_directory_uri() 代替。
  • ‘template_url‘ / ‘template_directory‘ - 当前主题的 URL 路径 。在子主题中, get_bloginfo(‘template_url‘) 和 get_template() 都将返回父主题的目录。可以考虑使用 get_template_directory_uri() (用于父主题目录)或get_stylesheet_directory_uri() (用于子主题目录)代替。
  • ‘pingback_url‘ - 显示通告文件 XML-RPC 的URL (xmlrpc.php)
  • ‘atom_url‘ - 显示 Atom feed URL (/feed/atom)
  • ‘rdf_url‘ - 显示 RDF/RSS 1.0 feed URL (/feed/rfd).
  • ‘rss_url‘ - 显示 RSS 0.92 feed URL (/feed/rss).
  • ‘rss2_url‘ - 显示 RSS 2.0 feed URL (/feed).
  • ‘comments_atom_url‘ - 显示评论的 Atom feed URL (/comments/feed).
  • ‘comments_rss2_url‘ - 显示评论的 RSS 2.0 feed URL (/comments/feed).


保存后,打开wordpress后台界面。点开外观-->主题界面。

这里就看到我们新建的主题myThemes了,点击启用。

点击查看站点。

现在body里没有任何内容,所以是空白的。

在body里加入

1 <?php bloginfo(‘name’); ?>

表示显示在 设置 > 常规 中设置的“站点标题”。

效果:

接下来就是一个画板,任其挥洒了!

时间: 2024-08-07 19:03:02

【wordpress】wordpress自定义主题的相关文章

解决WordPress后台安装主题、插件图片不显示的问题

今天搭建wordpress发现现在主题的时候预览图片都没有了,于是搜索了一下,发现下面的这个方法确实管用,于是转载收藏. 有在WordPress后台安装主题.插件的小伙伴可能会遇到主题.插件图片不显示的问题,这给我们照成了不便.说到底还不是墙的问题,所以咱可以通过修改本地的hosts文件来决解. 决解方法 打开C:\WINDOWS\system32\drivers\etc目录里的hosts文件,将以下代码追加到hosts文件尾并保存,代码来自 Uazoh优佐生活 #wpCDN 93.184.21

WordPress瀑布流主题PinThis中文版v1.6.8

PinThis主题来源于英语网站http://pinthis.pixelbeautify.com/的汉化(语言文件+控制面板),中文版采用的是翻译器手工核对,并不完美,只对主题中文化,其他没做任何更改. PinThis是一个Pinterest灵感的WordPress主题,充满了风格和定制选项.PinThis是一个前沿的,基于砌体的多用途主题.它干净的设计是伟大的项目,强调风格和现代的外观.设计主题是在一个美丽的FLAT幻灯风格.它适用于个人作品集,创意机构,设计师作品集,Illustrator

Extjs自定义主题

每一个ExtJS程序都是从一个Application类的实例开始的.它包含了你程序的全局设置. 自定义主题的例子:新建一个工作空间:windows控制台窗口下进入有sdk所在的目录输入命令:sencha –sdk  ~/ generateworkspace my-workspace,而后会发现在sdk所在的目录下会出现myworkspace文件夹.其中有连个目录分别为:ext,packages (1)建立一个应用程序测试项目: 在myworkspace目录下输入命令:sencha –sdk ex

百度echarts自定义主题使用

1.百度echarts官网主题构建,自定义主题 主题在线构建  http://echarts.baidu.com/theme-builder/ 构建完成后下载并保存js文件 2.html导入保存的js文件 <!-- 引入 ECharts 文件 --> <script src="echarts.js"></script> <!-- 引入 自定义主题customed --> <script src="customed.js&q

Material使用05 自定义主题、黑夜模式\白天模式切换

需求: 1 不使用materil依赖内建的主题,使用自己创建的主题 2 利用自己创建的主题实现白天模式和黑夜模式 1 自定义主题 1.1 创建自定义主题文件 them.scss // 引入material自定义主题支持 @import '[email protected]/material/theming'; // 引入material公用的主题风格 @include mat-core(); // 自定义颜色 $my-app-primary: mat-palette($mat-blue); $m

element 如何自定义主题

自定义主题 在我学习element的时候,就直接忽略了.现在返回来学习一下 ,原来 通过自定义主题可以改变elemnt中默认的一些样式.这样,对于一些不想用elment自带但是用到比较多的样式,可以进行修改. 看了很多关于自定义主题的文章,其实都是 差不多的, 我想自己写一遍,加深一下印象,也希望能给别人带来帮助. 这篇博客的思路,总结性比较强,指的大家j借鉴:https://blog.csdn.net/young_emily/article/details/78591261 改变原有的elem

vue2.0-基于elementui换肤[自定义主题]

0. 直接上 预览链接 vue2.0-基于elementui换肤[自定义主题] 1. 项目增加主题组件 在项目的src/components下添加skin文件夹 skin文件获取地址 2. 项目增加自定义主题 自定义添加主题下载地址 https://elementui.github.io/theme-chalk-preview/#/zh-CN 3. 项目引入和使用 选择你想要随主题改变的element元素在src/global/themeArray里面,不希望随主题改变的可以注释掉 选择皮肤之后

Flutter自定义主题并切换保存

现在越来越多的应用程序支持黑/白主题切换了,在Flutter中更是简单,Flutter库中提供了ThemeData.dark和Theme.light两个默认主题.在main.dart初始化MaterialApp的时候直接设置进去即可 MaterialApp( title: 'Flutter Demo', theme: ThemeData.light(), home: MyHomePage(title: 'Flutter Demo Home Page'), ); 一.自定义主题 知道怎么设定主题了

[技术干货] Zabbix创建自定义主题(theme)

前提:zabbix系统已部署好. 1.在你的zabbix系统找到assets/styles目录,创建css后缀的文件: cp blue-theme.css custom-theme.css 2.修改custom-theme.css的内容,由于是测试,我修改了导航栏的背景颜色:注释掉原来的css代码,然后把background-color修改成:aqua 3.在你的zabbix系统找到include/classes/core目录,在Z.php文件中添加以下php代码: vim Z.php publ