wordpress开发框架-Wordpress教程-爱模板网

wordpress开发框架

2024-04-24 15:46:09

真香，30天做一套wordpress主题（第1天）：基础框架搭建

欢迎来到《真香，30天做一套wordpress主题》系列文章，我们的目标是（没有蛀牙！）建立一套全新的wordpress主题，花上30天的时间闭关修炼，如果你看到的第一篇文章不是《基础框架搭建》，建议你关注我们（数字江湖异志录），从该系列的第一篇开始阅读。

我们将尽量保持文章的循序渐进和通俗易懂，请确保自己已经掌握了那一篇文章的全部内容时才选择跳过，不然可能会错过关键的信息噢~

理论基础

这里我们假定你已经知晓了以下基础知识，这些基础知识对理解文章内容是至关重要的：

1. HTML/CSS/JS基础

2. PHP基础

3. 如何使用Wordpress

4. 如何搭建web环境

如果你已经知晓了以上基础知识，恭喜你，本系列的任何文章内容对你而言都没有什么难度。

产品设定

当我准备制作一款wordpress主题的时候，我在脑海里浮现出几个关键字，然后迫不及待地把它们写了下来，而这些将上贯穿我们整个制作过程的核心产品/技术设定：

1. 纯AMP主题（极致速度体验）

2. 移动端/PC端响应式布局（Flex布局）

3. Pure CSS design（无图设计）

4. 极简&科技风格（简约但不简单）

5. 传统blog style（还是那个配方还是那个味道）

6. SEO优化（自带SEO光环）

7. 无插件依赖（Plugin free）

Wordpress主题基础结构

我们先来看一张图了解一下wordpress主题的基础页面结构：

（图片来源：wphierarchy.com）

这张图很清晰的表达了整个wordpress主题的层级结构，看上去有点复杂，但我们其实不需要制作所有的页面，只需要关注最后的两层就可以了，我们可以看到，其实整个wordpress主题的关键文件只需要一个index.php就够了，但我们实际不会这样做，因为把所有的页面内容都写到一个文件里实在是太耦合了，所以我们关注到上一个层级，并确定了以下几个需要制作的主题页面：

1. home.php 首页

2. 404.php 404未找到页面

3. search.php 搜索页面

4. singular.php 文章页面

5. archive.php 存档页面

总共5个页面，这样看是不是还挺简单的呢？

开始搭建

我们给这款主题取名叫FreeGeek，找到wordpress文件夹下，按如下路径建立FreeGeek文件夹。

/wp-content/themes/FreeGeek

我们需要建立的第一个文件是style.css，这个文件主要是对主题进行描述（通过注释）。

/*Theme Name: FreeGeekText Domain: FreeGeekVersion: 1.0Requires at least: 4.7Requires PHP: 5.2.4Description: Some descriptionTags: blog, two-column, amp, purecssAuthor: the Inline-flex teamAuthor URI: Theme URI: License: GNU license*/

啥？为什么就是一些注释？没错，就这些就够了，至于为什么要选择从一个style.css文件里读取配置信息，这个就得去问wordpress官方团队了（我估计这应该是有历史渊源的）。

然后我们建立一个index.php文件，内容为空，作为最顶层的一级，index.php文件是必不可少的。

这样我们就可以在后台主题列表里看到我们的FreeGeek主题了，虽然还什么都没有。

点击主题详情，我们就能看到那些在style.css里描述的主题信息：

这里其实还需要一张主题的截图文件，我们到后期再添加。

终于可以写代码了，我们建立一个home.php文件，从amp官网文档里复制一段快速开始的代码并稍作清理：

<!doctype html><html amp lang="en"> <head> <meta charset="utf-8"> <script async src=""></script> <title>Hello, AMPs</title><link rel="canonical" href=""> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> </head> <body> <h1>Welcome to the mobile web</h1> </body></html>

这样我们的首页就可以访问了：

现在我们来抽离公共html head，并使用wordpress的方法对一些基础内容进行填充：

home.php

<!doctype html><html amp <?php language_attributes(); ?>> <head> <?php get_header() ?> <style amp-custom>/* 自定义style内容 */ </style> </head> <body> </body></html>

现在页面跑不起来了，会报错，因为我们还没有建立header.php文件，wordpress自动加载这个文件会找不到。

我们来建立header.php文件：

这里需要关注的几个wordpress内置方法是：

1. wp_get_document_title 获取文档标题

2. language_attributes 当前语言设定，比如en-US

这样我们就完成了head的抽离，最终页面访问仍然和之前的页面保持一致。

总结和预告

今天我们实现了一个wordpress AMP主题的基础框架，即便现在还处于完全不能用的状态，但我们已经迈出了重要的一步，明天我们将关注到主题自定义参数的使用，并初步搭建页面公共顶部区域。

如果你喜欢这个系列的文章，赶快关注我们吧，不要错过后续的更多干货。

眼下最流行的五大CSS框架，你都知道么？

如今，CSS框架越来越受欢迎，可以说已经应用到每一个网站上了。作为开发工具，CSS框架一直处于不断进化和改进的状态，因此我们强烈建议您关注眼下的趋势。这篇文章会带您了解2017年最流行的5种CSS框架。

1.Bootstrap

这个框架是GitHub的明星产品之一，被认为是拥有最好的响应性的CSS框架。专为前端开发而设计，有助于构建web设计理念、移动优先项目、网格系统、排版和按钮等。

Bootstrap没有任何附加功能，但是有第三方插件可用，除了常规的HTML元素，还具有其他常见的UI元素。其核心原则是RWD和mobile first。Bootstrap版本3支持各种浏览器(最新版本)，并且自Bootstrap 2开始，框架支持响应式网页设计。Bootstrap 4版本目前正在开发中。

Bootstrap非常受欢迎，但并不是说他比其他的框架要好。大多数人用它是因为它的受欢迎程度，由于这一点，有很多资源可用(如教程，额外的插件等)，使得使用Bootstrap更容易。

2.Foundation

Foundation是一个开源项目，是CSS框架界的另一巨头。众所周知，它得流畅性和响应性非常好，可以用于许多用途：构建网站、创建电子邮件模板、构建移动和web应用程序。

这个框架对用户也非常友好，提供了培训、支持和咨询等服务。还有一些独特的组件(击键，Joyride，Flex视频等)和一些附加组件。其核心原则除了RWD和mobile first，还包括semantic。

Foundation以完美的工作流程和开发人员的大力支持为自己赢得了巨大的利润。它是一个非常专业的框架，并提供了大量可用的教程，用户能够随时了解Foundation。

3.Bulam

Bulam开放源码、免费并且节约开发人员的时间。由于学习起来和使用非常简单，因此最近变得非常流行。

首先，Bulma包含很棒的UI组件，如选标签、导航栏、框和面板等等，因为此框架旨在为用户提供清晰而有吸引力的UI。其次，Bulma非常的模块化，用户可以只导入所需的功能。最后，这个框架的类可读性很高，这点对于一些开发者来说可能是非常具有吸引力的。

Bulma易于理解和使用简单，同时它具有所有必要的功能，帮助您高效的创建出优质产品。

4. Ulkit

可能没有多少人知道(使用)这个框架，但它与其他类似框架具有相同的功能。

Ulkit是轻量级和模块化的，用于创建快速但功能强大的Web界面。 Ulkit基本上是一组易于定制的组件集合，具有HTML Editor、Flex、其他附加组件和独特的组件。它的核心原则是RWD和mobile first，Ulkit广泛应用于WordPress主题中。使您能够灵活的进行手动定制机制。

5. Semantic UI

从名称就能猜出，Semantic UI旨在使网站构建过程更加语义化。核心特征是利用自然语言原理使代码更易于阅读，更容易理解。

核心原则是标签矛盾、语义和响应能力。这个框架是将语句和类作为可交换的组件来处理，并使用直观的JS和简单的调试。

Semantic UI的好处在于，它提供了组织良好的文档和网站，并提供了使用指南。简而言之，它有3000多个主题变量，50多个UI组件，以及5000多个提交。绝对值得一试。是创建页面漂亮、反应灵敏的网站的不错之选择。

如何使用XAMPP搭建本地环境的WordPress网站

想学习WordPress建站，不想买服务器？

您是否使用XAMPP在计算机上搭建建本地环境WordPress网站？在电脑上搭建本地环境的WordPress可帮助您试用WordPress，测试主题和插件以及学习WordPress开发。

在本文中，我们晓得博客将向您展示如何使用XAMPP轻松地创建本地环境的WordPress网站。

推荐：（图文）WordPress本地搭建的网站如何发布到网上？

为什么要搭建本地WordPress网站？

　　搭建本地WordPress网站是开发人员和网站所有者的常见做法，可以让您测试WordPress，而无需在互联网上创建实际的网站。
　　本地网站仅在您的计算机上可见。您可以尝试不同的WordPress主题和插件，测试其功能，并学习WordPress基础知识。
　　如果您已经拥有WordPress网站，则可以创建您网站的副本，在网站上实施之前尝试新的功能。
　　重要提示：只有您在计算机上才能看到本地网站。如果您想制作一个实时网站，则需要一个域名和WordPress托管。

什么是XAMMP?

　　XAMPP是一个软件包，其中包括在计算机上设置本地服务器环境所需的所有内容。
　　为了创建本地WordPress网站，您需要在计算机上设置Web服务器软件（Apache），PHP和MySQL。
　　PHP是一种编程语言，而MySQL是一种数据库管理软件。两者都需要运行WordPress。
　　对于初学者，安装它们非常困难，这就是为什么需要XAMPP的原因。
　　XAMPP使您可以轻松地在本地构建WordPress网站。它适用于基于Windows，Mac和Linux的计算机。
　　让我们开始安装XAMPP并运行本地WordPress网站。

　　推荐：什么是WordPress主题框架

在计算机上安装XAMPP

　　首先，您需要访问XAMPP网站并单击操作系统的下载按钮。

如何使用XAMPP搭建本地环境的WordPress网站

　　根据您的操作系统，安装向导和应用程序界面可能与此处的屏幕截图有所不同。本文中，我们将向您展示该软件的Windows版本。
　　下载XAMPP之后，单击并运行安装程序。

如何使用XAMPP搭建本地环境的WordPress网站

　　XAMPP将询问在何处安装软件及要安装哪些软件包，选择默认设置，继续单击“下一步”完成设置向导。

如何使用XAMPP搭建本地环境的WordPress网站

　　启动XAMPP控制面板应用程序。
　　使用XAMPP应用程序，您可以将Apache Web服务器作为本地服务器运行，而将MySQL作为数据库服务器运行。继续并单击Apache和MySQL旁边的开始按钮。

如何使用XAMPP搭建本地环境的WordPress网站

　　XAMPP 现在将启动Apache和MySQL，使这两个应用程序都可以在计算机上运行。
　　应用程序启动后，名称部分会有绿色背景显示。

如何使用XAMPP搭建本地环境的WordPress网站

　　现在，准备使用 XAMPP 安装搭建本地环境的WordPress网站。

　　推荐：如何在Xampp中安装PHP GD(GD Graphics Library)

如何使用XAMPP搭建本地环境的WordPress网站

　　首先，需要下载WordPress。访问WordPress.org网站，单击“下载WordPress”按钮；

如何使用XAMPP搭建本地环境的WordPress网站

　　下载WordPress之后，需要解压缩zip文件，然后会看到一个wordpress文件夹，复制此文件夹。

如何使用XAMPP搭建本地环境的WordPress网站

　　复制WordPress文件夹之后，转到您的XAMPP安装文件夹。
　　Windows系统地址：C:/Program Files/XAMPP/htdocs或C:/Xampp/htdocs文件夹。
　　Mac系统地址：/Applications/XAMPP/htdocs文件夹。
　　将复制的wordpress文件夹粘贴到htdocs中。
　　也可以将wordpress文件夹重命名为其他任何名称，可以帮助您轻松识别本地站点。

如何使用XAMPP搭建本地环境的WordPress网站

　　打开浏览器，然后在浏览器的地址栏中输入以下URL
　　;(如果您将WordPress文件夹重命名，请替换)

　　输入网址后，出现WordPress安装向导，要求选择一种语言，选择后，单击“继续”按钮
　　会出现WordPress的欢迎页面，WordPress需要数据库名称，数据库用户名，密码和主机信息

如何使用XAMPP搭建本地环境的WordPress网站

　　接着，需要为WordPress网站创建一个数据库。
　　打开浏览器，输入
　　启动 XAMPP 预先安装的 phpMyAdmin应用程序，
　　单击数据库，并为新数据库提供一个名称，排序规则选择 utf8mb4_general_ci。之后，点击“创建”按钮继续

如何使用XAMPP搭建本地环境的WordPress网站

　　切换到;点击“现在就开始”

　　进入此页面,输入数据库名称testweb，用户名root,密码不填，其他默认不变

如何使用XAMPP搭建本地环境的WordPress网站

　　单击“提交”按钮继续。
　　WordPress 要求您提供有关您的网站的信息。
　　首先，输入此站点的标题。
　　之后，输入管理员帐户的用户名，密码和电子邮件地址。

如何使用XAMPP搭建本地环境的WordPress网站

　　填写完所有信息后，单击“安装WordPress”按钮。
　　WordPress 现在将运行安装并在完成后提示您登录。
　　您可以通过转至/localhost/wordpress/wp-admin页面登录到您的网站，并使用在安装过程中输入的用户名/密码登录。

如何使用XAMPP搭建本地环境的WordPress网站

　　推荐：如何修复WordPress中的建立数据库连接时出错

搭建本地环境WordPress网站后

　　现在，已经使用XAMPP搭建好本地WordPress网站，可以在WordPress网站上实时操作。
　　登录搭建好的WordPress网站，在侧边栏中的外观菜单，点击主题，然后添加即可；这里有一些免费主题，可以试试。

　　以上是晓得博客为你介绍的如何使用 XAMPP搭建本地环境的WordPress网站的全部内容，Mac版本搭建本地WordPress网站，可参考：如何在 Mac 上使用MAMP本地安装WordPress网站