wordpress主题制作1 将html制作为wordpress主题模板

wordpress有一些主题基础知识，可参考：wordpress主题制作开发实战教程3.1（1）- 主题基础 BY WP花园

文章内容目录：

WordPress主题主要文件模块

模板工作流程，判断使用哪个模块

WordPress主题文件模块优先级
主题里的基本循环

1.找到代码

2.在<article>标签之前添加代码，开始我们的循环。

3.接下来，添加显示文章内容的代码

4.在文章内容中替换掉链接的代码

5.关闭循环，否则循环将没有作用。

6.保存所有页面，然后在浏览器中刷新显示。

创建存放所有主题文件的文件夹，放在服务器wp-content/themes/ 目录下。
主题模板文件位于根目录下，而JavaScript，CSS，图片则放置在素材目录中，模板放置在相应的模板分目录下，并将与核心相关的功能集合放置 inc文件夹下。
assets
– css
– images
– js
inc
template-parts
– footer
– header
– navigation
– page
– post
404.php
archive.php
comments.php
footer.php
front-page.php
functions.php
header.php
index.php
page.php
README.txt
rtl.css
screenshot.png
search.php
searchform.php
sidebar.php
single.php
style.css
将index.html重命名为index.php文件，并拆分成头部文件，脚部文件，侧边栏文件，php文件等。

将</header>以上部分代码剪切，新建为header.php。在index.php文件开头加入<?php get_header(); ?>，调用header.php文件。
在header.php文件与footer.php文件中分别添加了wp_head和wp_footer回调。
wp_head回调用于许多插件添加标签至<head>,例如styles,scripts及meta tags，
wp_footer用于插件回调JavaScript文件。
在header.php文件中，</head> 标签上方插入以下代码：<?php wp_head(); ?>
在footer.php文件中，</body>标签上方插入以下代码：<?php wp_footer(); ?>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="keywords" content="" /><meta name="description" content="<?php bloginfo('description'); ?>" /><title><?php bloginfo('name'); ?></title><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 echo get_bloginfo('rss2_url'); ?>" /><link rel="alternate" type="application/rss+xml" title="RSS 2.0 - 所有评论" href="<?php bloginfo('comments_rss2_url'); ?>" /><?php wp_head(); ?>
</head><body><header>//……</header>

将index.html中<footer>以下部分剪切，新建为footer.php。在index.php文件开头加入<?php get_footer(); ?>，调用footer.php文件。

    <footer>//……</footer><?php wp_footer(); ?>
</body>
<script src="<?php bloginfo('stylesheet_url'); ?>/js/XXX.js"></script>
</html>

为静态页面创建模板文件:WordPress是由pages，posts和atachments构成的。可以通过创建特殊的模板文件来展示。
最常用的模板文件为index.php和page.php，用于展示静态页面。这是由于静态页面不需要展示所有的信息，例如数据和评论。
style.css 样式表
wordpress主题默认引用wp-content/themes/style.css为主要css样式文件，注意css存放位置及命名。
在index.php文件中修改css引用地址：href="<?php bloginfo('stylesheet_url'); ?>"
在css文件最开始的地方添加以下信息：

Theme Name: （主题名字）
Theme URI: （主题地址）
Author: （主题作者）
Author URI:（作者地址）
Description: （主题描述）
Beginners Guide
Version:（版本）
Tags: （标签）

在wordpress后台启用主题

bloginfo('name');（显示站点标题）
bloginfo('url');（显示站点地址）
bloginfo( 'description' );（显示站点描述）

wordpress主题制作1 将html制作为wordpress主题模板相关推荐

WordPress主题制作全过程（三）：HTML静态模板制作
制作WordPress需要了解PHP,但是不管怎样,你的博客页面都是一张网页,网页之所以能够在浏览器中显示出来,是因为最终传送给浏览器的是HTML.CSS和JS等终端代码,最终由这些代码控制浏览器的显 ...
WordPress主题制作全过程（五）：制作header.php
你可以尝试用文本编辑器打开从WordPress主题制作全过程(三):HTML静态模板制作下载到的 .html 文件,不知道你有没有发现他们头部的代码都非常的相似呢?其实我们可以提取这部分相似的代码,放 ...
WordPress主题制作全过程
WordPress主题制作全过程完整列表: WordPress主题制作全过程(一):基础准备 WordPress主题制作全过程(二):主题文件构成 WordPress主题制作全过程(三):HTML静态 ...
怎么把照片做成计算机主题,Win7主题制作教程电脑主题制作图文方法
修改Windows7主题文件的具体步骤: 一.修改.theme主题文件 1.到365主题下载"天涯明月刀主题后"进行安装,然后我们在C:\Windows\Resources\The ...
wordpress企业站主题制作笔记
特定位置调用特定的文章tags.phpwp_tag_cloud标签参数说明 1.企业静态页面制作成wordpress主题企业主题和博客主题的区别 1.首页显示内容不一样 2.产品为主,图片丰富, ...
wordpress引入php文件,WordPress主题制作之模板文件的引入方法，wordpress模板
WordPress主题制作之模板文件的引入方法,wordpress模板 get_template_part() 用来引用模板文件,类似于 get_header().get_sidebar() 和 ge ...
WordPress主题制作常用代码集合
如何你是个wordpress主题设计者,可能会在制作wordpress主题时为了一些寻找合适的wordpress代码焦虑,这里搜集总结wordpress主题开发中常用的代码片段,希望为你工作中带来方便 ...
WordPress主题制作全过程（二）：主题文件构成
声明:本文转自露兜博客在开始制作WordPress主题之前,首先得了解WordPress主题到底由哪些文件构成,你得清楚WordPress程序是怎样与主题文件连接的. 以下是WordPress默认主 ...
php源码自定义字段,wordpress主题制作：设置自定义选项字段
在主题制作时,有时需要将一些文字和样式提出来,做成一个选项给用户设置. customize_register这个可以帮到你定义一个可编辑内容,并且可以设置颜色.代码如下,必须在functions.p ...

wordpress主题制作1 将html制作为wordpress主题模板

wordpress主题制作1 将html制作为wordpress主题模板相关推荐

最新文章

热门文章