fcn从头开始_如何从头开始构建WordPress主题:第一步-程序员宅基地

技术标签: python  java  web  php  html  

fcn从头开始

WordPress themes give WordPress users the ability to completely change the look of a WP website, as well as add functionality to it. In this three-part series, we’ll introduce WordPress themes, showing how they work, how they’re structured, the PHP architecture behind them, and other relevant information. We’ll then embark on a journey to build a WordPress theme.

WordPress主题使WordPress用户能够完全更改WP网站的外观并为其添加功能。 在这个由三部分组成的系列文章中,我们将介绍WordPress主题,展示它们的工作原理,结构,在其背后PHP体系结构以及其他相关信息。 然后,我们将踏上构建WordPress主题的旅程。

This first article prepares us for this journey by discussing the theory behind WordPress themes.

第一篇文章通过讨论WordPress主题背后的理论,为我们为这一旅程做好了准备。

一两个词的基础知识 (A Word or Two on the Basics)

WordPress was conceived as a blog engine, or a simple, blogging-oriented content management system. It was initially released in 2003, by Matt Mullenweg and Mike Little. Ever since then, its user base hasn’t stopped growing. WordPress is a PHP-powered web application that uses MySQL as its database, and is usually run behind a server program, such as NGINX or Apache.

WordPress被认为是一个博客引擎,或一个简单的,面向博客的内容管理系统。 它最初由Matt Mullenweg和Mike Little于2003年发行。 从那时起,其用户基础一直没有停止增长。 WordPress是PHP驱动的Web应用程序,使用MySQL作为数据库,通常在服务器程序(例如NGINX或Apache)后运行。

WordPress is basically just a bunch of PHP files that work together as an application. A PHP interpreter uses these files to produce web pages to web visitors. It produces HTML, to be more precise.

WordPress基本上只是一堆可以作为应用程序一起工作PHP文件。 PHP解释器使用这些文件来为Web访问者生成网页。 更确切地说,它产生HTML。

The role of the templating engine of WordPress is to enable us to write (primarily) presentational instructions — instructions on how exactly to structure and style the HTML content that WordPress will output. These instructions are encapsulated in WordPress themes.

WordPress模板引擎的作用是使我们能够(主要)编写演示性说明,即有关如何精确构造和设置WordPress输出HTML内容的说明。 这些说明封装在WordPress 主题中

Each theme consist of a folder with PHP, CSS, and sometimes JavaScript files. The files that every WordPress theme must have — at the minimum — are style.css and index.php. This is the technical minimum required for the theme to function, but no serious WordPress theme stays with only these two files.

每个主题都包含一个包含PHP,CSS和JavaScript文件的文件夹。 每个WordPress主题必须至少具有的文件是style.cssindex.php 。 这是该主题正常运行所需的技术最低要求,但是只有这两个文件才不会出现严重的WordPress主题。

基本模板和部分文件 (Basic template and Partials Files)

The minimum index.php file catches all the queries that don’t have their respective specialized template files within a theme. front-page.php, home.php, page.php, taxonomy.php, author.php, archive.php are some of the templates that we can use in our themes to further structure specific pages or queries in our theme.

最小的index.php文件可捕获主题中没有其各自专用模板文件的所有查询。 front-page.phphome.phppage.phptaxonomy.phpauthor.phparchive.php是我们可以在主题中用来进一步构建主题中特定页面或查询的一些模板。

For example, the archive.php file will specify the HTML output structure when a visitor requests some of the pages that display list of posts. page.php will specify how to display individual pages, and so on.

例如,当访问者请求一些显示帖子列表的页面时, archive.php文件将指定HTML输出结构。 page.php将指定如何显示单个页面,依此类推。

Partials files encapsulate repeatable parts of pages in WordPress website. For example, the header and footer are usually consistent across all pages on a website, so WordPress themes separate these page parts into header.php and footer.php. comments.php will be used to display comments wherever applicable.

部分文件封装了WordPress网站中页面的可重复部分。 例如,页眉和页脚通常在网站上的所有页面上都是一致的,因此WordPress主题将这些页面部分分为header.phpfooter.phpcomments.php将在适用时显示评论。

These files are then required from the template files that we explained.

然后,从我们说明的模板文件中需要这些文件。

This way, we adhere to the DRY principle, and don’t repeat the code in all those files.

这样,我们遵守DRY原则 ,并且不会在所有这些文件中重复执行代码。

模板层次结构 (Template Hierarchy)

In the WordPress templating system, there’s a hierarchy of template files that WordPress will try to use for each request. This hierarchy is based on specificity. WordPress will try to use the most specific file for each request, if it exists. If it doesn’t exist, it will look up the next, less specific file, and so on.

在WordPress模板系统中,WordPress将尝试使用每个模板文件的层次结构。 该层次结构基于特定性。 WordPress将尝试为每个请求使用最特定的文件(如果存在)。 如果不存在,它将查找下一个不太明确的文件,依此类推。

To explain this on a page request — when the visitor visits a specific page on a WordPress website — WordPress will first try to find the template the page author assigned to it in the wp-admin backend. That can be a completely custom template file, even completely static.

为了在页面请求中解释这一点-当访问者访问WordPress网站上的特定页面时-WordPress首先会尝试在wp-admin后端中找到页面作者为其分配的模板。 那可以是一个完全自定义的模板文件,甚至可以是完全静态的。

If there’s no such template, or it wasn’t assigned, WordPress will try to find a template file with a slug of that particular page in its filename. That would look like page-mypageslug.php — whatever our mypageslug may be.

如果没有这样的模板,或者它不分配,WordPress会尝试找到与特定页面的其文件名蛞蝓一个模板文件。 看起来就像page-mypageslug.php无论我们的mypageslug可能是什么。

The next file WordPress will try to use will be a file with that particular page’s ID in its filename — like page-48.php.

WordPress将尝试使用的下一个文件是文件名中带有该特定页面ID的文件,例如page-48.php

If none of those page-specific files exist, WordPress will try to use page.php — used for all the pages, unless otherwise specified.

如果没有这些特定于页面的文件,除非另有说明,否则WordPress将尝试使用page.php用于所有 页面

If it doesn’t find page.php, it will try to use singular.php. This template file is used when — for postssingle.php is not found, and for pages when page.php is not found.

如果找不到page.php ,它将尝试使用singular.php 。 当(对于帖子)找不到single.php ,以及对于未找到page.php 页面时,将使用此模板文件。

Now, if none of these are found in our page request example, WordPress will fall back to index.php.

现在,如果在我们的页面请求示例中没有找到这些,则WordPress将退回到index.php

This, briefly, explains the WordPress template hierarchy. All of these template files we mentioned will usually incorporate (require) partials like header.php, footer.php and others as needed. They can also specify their specific partials to use — for example, a page-specific header.

简要说明了WordPress模板层次结构。 我们提到的所有这些模板文件通常将根据需要合并(需要)一些部分,例如header.phpfooter.php和其他文件。 他们还可以指定要使用的特定部分(例如,页面特定的标题)。

The next thing you need to be familiar with to understand theming is the WordPress post type.

您需要熟悉的下一件事是WordPress 帖子类型

WordPress帖子类型 (WordPress Post Types)

The content in WordPress exists in the form of post types. The built-in types are posts and pages. These are the logical ones. WordPress also has a built-in attachment post type, navigation menus and revisions. These are also, technically, post types.

WordPress中的内容以帖子类型的形式存在。 内置类型是postspages 。 这些是合乎逻辑的。 WordPress还具有内置的附件发布类型, 导航菜单修订版 。 从技术上讲,这些也是职位类型。

We can also specify our own post types, whether in our themes or our plugins. We need use the following:

我们还可以在主题或插件中指定自己的帖子类型。 我们需要使用以下内容:

register_post_type( $post_type, $args )

Here, we specify the post type name, how it’s structured, how it’s represented in wp-admin, and so on.

在这里,我们指定帖子类型名称,其结构,在wp-admin的表示方式,等等。

When we have this defined, we can also create template files specific for this post type. Custom post types, like pages and posts, have their own template hierarchy.

定义完此内容后,我们还可以创建特定于此帖子类型的模板文件。 自定义帖子类型(例如页面帖子 )具有自己的模板层次结构。

More about the template hierarchy can be found here.

有关模板层次结构的更多信息,请参见此处

style.css (style.css)

style.css is a crucial file in every WordPress theme, and its function goes beyond styling. This file is used to provide basic theme information to WordPress. Without this, WordPress would not be able to register a theme as a theme.

style.css是每个WordPress主题中的关键文件,其功能不只是样式。 此文件用于向WordPress提供基本主题信息。 没有这个,WordPress将无法将主题注册为主题。

The WordPress Codex provides more information about all the details of this file. For the sake of brevity, we’ll review just some of them. In this CSS file’s header comments, we provide WordPress information on the following:

WordPress Codex提供了有关此文件所有详细信息的更多信息。 为了简洁起见,我们将仅对其中一些进行回顾。 在此CSS文件的标题注释中,我们提供有关以下内容的WordPress信息:

  • theme name

    主题名称
  • author

    作者
  • description

    描述
  • theme URI

    主题URI
  • version

  • license

    执照
  • and other details

    和其他细节

WordPress uses these details to display the theme properly in the back end.

WordPress使用这些详细信息在后端正确显示主题。

The meta header in the Twenty Seventeen theme, for example, looks like this:

例如,“二十一十七”主题中的元标头如下所示:

/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

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.
*/

This said, style.css file is, obviously, used to style our WordPress pages.

style.cssstyle.css文件显然用于设置WordPress页面的样式。

WordPress动作和筛选器挂钩 (WordPress Action and Filter Hooks)

WordPress — and WordPress themes and plugins — heavily rely on action hooks and filter hooks. These are part of an event-riven architecture. A simple explanation of this would be that, in the process of execution of the page connected to visitors’ web request, there are certain registered points — hooks — that enable us to fire actions at those points. We hook PHP functions to those points to be executed. Those are action hooks. Filter hooks are focused on processing — changing — pieces of data within the execution cycle. So, if the filter hook is registered for any piece of data (PHP variable), we can hook our own function and change, or process, this piece of data.

WordPress(以及WordPress主题和插件)在很大程度上依赖于动作挂钩过滤挂钩 。 这些是事件导向架构的一部分 。 一个简单的解释是,在执行连接到访问者Web请求的页面的过程中,有某些注册点( 挂钩 )使我们能够在这些点上触发动作。 我们将PHP函数挂钩到要执行的那些点。 这些是动作挂钩。 筛选器挂钩专注于在执行周期内处理(更改)数据。 因此,如果为任何数据段(PHP变量)注册了过滤器挂钩,我们就可以挂钩自己的函数并更改或处理该数据段。

Although unorthodox, compared to the omnipresent MVC software pattern, the reliance on the hook system in WordPress has played a big role in the popularization of WordPress, as it has made it very simple to plug new functionalities into it, without the need to touch — or even to deeply understand — the core codebase itself.

尽管是非正统的,但与无所不在的MVC软件模式相比,对WordPress中的钩子系统的依赖在WordPress的普及中起了很大的作用,因为它使插入新功能变得非常简单,而无需接触—甚至深入了解- core代码库本身。

Hooks are explained here at greater length, and we’ll delve into it more in other parts of this guide.

此处将对钩子进行更详细的说明,我们还将在本指南的其他部分中对其进行深入研究。

循环 (The Loop)

The Loop is the elementary part of the WordPress request cycle. As the WordPress Codex puts it:

循环是WordPress请求周期的基本部分。 正如WordPress Codex所说:

The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags.

循环是WordPress用于显示帖子PHP代码。 使用The Loop,WordPress处理要显示在当前页面上的每个帖子,并根据其与The Loop标记中指定条件的匹配方式对其进行格式化。

The WordPress loop is, basically, a PHP while loop that displays posts according to visitors’ request, and specified criteria in the template file in which it’s specified.

WordPress循环基本上是一个PHP while循环,它根据访问者的请求以及在指定模板文件中指定的条件显示帖子。

Within the loop, whether it outputs just a single post or a page, or a list of them, we can output various parts of the post, like title and content. We can specify any HTML output or structure we want. We can also use conditional tags, and so on.

在循环中,无论输出的是单个帖子还是页面,还是页面列表,我们都可以输出帖子的各个部分,例如标题和内容。 我们可以指定所需的任何HTML输出或结构。 我们还可以使用条件标签,等等。

The most rudimentary example of the loop might look something like this:

循环的最基本的示例可能看起来像这样:

if ( have_posts() ) {
    while ( have_posts() ) {
        the_post();
        //
        // Post Content here
        //
    } // end while
} // end if

We can use multiple loops on one page (in which case we need to reset them), and there are specific WordPress functions that exist for use inside it.

我们可以在一页上使用多个循环(在这种情况下,我们需要将其重置),并且内部存在一些特定的WordPress函数供使用。

条件标签 (Conditional Tags)

WordPress Conditional Tags are snippets of PHP code that enable us to display pieces of content only when certain conditions are satisfied. For example, we have the site-wide header.php, which is used on every page of the website, but we may want certain HTML snippets to be displayed only on the home page or some other page.

WordPress条件标签是PHP代码的片段,使我们仅在满足某些条件时才显示内容。 例如,我们拥有站点范围的header.php ,它在网站的每个页面上都使用,但是我们可能希望某些HTML代码段仅显示在主页或其他页面上。

So, in the first example, we would use is_front_page(), and it would look something like this:

因此,在第一个示例中,我们将使用is_front_page() ,它看起来像这样:

if (is_front_page()){
    # do something
}

There are lots of conditional tags provided, and they allow for big flexibility in WordPress development.

提供了许多条件标签 ,它们使WordPress开发具有很大的灵活性。

These are the building blocks of WordPress, but there are also taxonomies — which can be built in or custom ones we can specify — and terms within these taxonomies. We use them to categorize and sort our posts.

这些是WordPress的基本组成部分,但也包含分类法 (可以内置或我们可以指定自定义的分类法)以及这些分类法中的术语 。 我们使用它们对帖子进行分类和排序。

主题结构 (Theme Structure)

At the end of this part, and before we endeavor to create our own theme, we’ll use the WP-CLI tool to scaffold a minimal theme based on Underscores — maintained by Automattic — to get a glance of the typical, minimal WordPress theme structure:

在这一部分结束,在此之前,我们努力创造我们自己的主题,我们将使用WP-CLI工具,脚手架基础上最小的主题下划线 -维护Automattic的 -让典型,最小的WordPress主题的一瞥结构体:

From this, we can get a sense of the way we can structure our theme files, folders, etc.

由此,我们可以了解构建主题文件,文件夹等的方式。

结论 (Conclusion)

In this first part of our guide on WordPress theming, we introduced the terminology and the building blocks of WordPress themes, which we’ll use in the following tutorials to build our own WordPress theme.

在有关WordPress主题的指南的第一部分中,我们介绍了WordPress主题的术语和构建基块,我们将在以下教程中使用它们来构建自己的WordPress主题。



There are three articles in this series on building a WordPress theme from scratch:

本系列中的三篇文章从头开始构建WordPress主题:

翻译自: https://www.sitepoint.com/build-wordpress-theme-from-scratch-first-steps/

fcn从头开始

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/culh2177/article/details/108337089

智能推荐

android频繁出入栈导致闪退,安卓概率性闪退 - layabox问答社区-HTML5引擎社区-LayaAir开发者社区...-程序员宅基地

文章浏览阅读831次。概率性闪退附带堆栈#00 pc 00000000005975cc /data/app/com.mylafe.game.handsomecat-1/lib/arm64/liblayaair.so (laya::JCServerFileCache::getFileID(char const*)+32) [arm64-v8a]2#01 pc 00000000005d02cc /data/app/com..._liblayaair.so

mysql无法启动服务的错误日志文件_MYSQL 服务无法启动,错误日志:InnoDB: .\ibdata1 must be writable...-程序员宅基地

文章浏览阅读852次。产生背景:之前在win7系统能正常运行,但今天重装系统,把c盘格式化了,在新系统运行mysql就报如下错误:错误提示;E:\mysql5.7\bin>mysqld --console2018-04-15T14:57:12.199569Z 0 [Warning] TIMESTAMP with implicit DEFAULT value is deprecated. Please use --..._shutting down plugin 'csv

同步捕获matlab,基于多匹配滤波器的跳码直扩同步捕获方法与流程-程序员宅基地

文章浏览阅读702次。本发明涉及扩频通信领域。背景技术:在抗干扰性和保密性要求较高的卫星通信以及军事通信领域,跳码直扩通信系统得到了较广泛的应用,而跳码同步捕获是跳码直扩通信系统中的关键技术。所谓捕获实际上就是在一个周期内通过相关运算进行伪码相位的搜索过程。在扩频接收系统中伪码捕获算法的种类有很多,如发送参考序列、统一定时法,虽然这些方法的设计结构简单易于实现,但是局限性较大,性能较差,捕获时间较长,耗时太大无法完成同..._扩频捕获

php-Arrays 函数-array_pad-用值将数组填补到指定长度_array补充到一定长度-程序员宅基地

文章浏览阅读2.4k次。array_pad() 用值将数组填补到指定长度【功能】 该函数将返回指定数组的一个复制,并用指定的值将其填补到指定的长度。 如果指定长度为正,则数组被填补到右侧,如果为负则从左侧开始填补。 如果指定长度的绝对值小于或等于原数组的长度,则没有任何填补 有可能一次最多填补1048576个数组元_array补充到一定长度

CSS学习笔记 —— 盒模型_盒子模型实际宽度用加margin吗-程序员宅基地

文章浏览阅读162次。本文是作者本人学习过程中的笔记总结,如若文中有不正确,或需要补充的地方,欢迎在评论区中留言。1. width_盒子模型实际宽度用加margin吗

初学者的回归分析 - 第二部分_seaborn r2_score round(2)-程序员宅基地

文章浏览阅读337次。初学者的回归分析 - 第二部分使用基于树的算法(决策树、随机森林、XGboost)建立一个ML回归模型简介第2.1部分 建立机器学习管道∘ 第1步:收集数据∘ 第二步:将数据可视化(问自己这些问题并回答)∘ 第三步:清理数据∘ 第四步:訓練模型∘ 第五步:評估∘ 第六步:使用hyperopt进行超参数调整∘ 第七步:选择最佳模型和预测结果第2.2部分:分析ML算法∘ 什么是决策树?∘ 什么是随机森林?∘ 什么是极限梯度提升法?(XGBoost)∘ 决策树 vs 随机森林 v_seaborn r2_score round(2)

随便推点

清华大学王青计算机系,清华大学王青教授到广西大学指导专业建设-程序员宅基地

文章浏览阅读217次。6月3日,教育部大学物理教学指导委员会主任委员、清华大学教授王青到广西大学,对物理学院专业建设进行指导。上午,物理学院负责人以及专业负责人分别作了关于学院一流专业建设思路、物理电子创陪班教学计划、物理专业培养计划和天文精英班办学特色、电子科学与技术专业培养计划和卓越工程师培养思路的报告,王青教授听取报告后,肯定了物理学院在专业建设方面做出的成绩,并给出有建设性的意见和建议。随后,王青教授作题为“量..._清华大学数字化研究所王青

layui数据表格之运用laypage分页的前端代码_layui-v1.0.9_rls 调用laypage-程序员宅基地

文章浏览阅读290次。<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %><!DOCTYPE html&._layui-v1.0.9_rls 调用laypage

图片与图片上下之间有空隙的解决方法_上下图片之间的间距不同-程序员宅基地

文章浏览阅读3k次。首先排除代码之间的换行符<br>,出现这个问题是因为图片为内联元素,有文字特性,默认存在间隙,所以会出现空白部分。可以将图片设置为block元素。img{ display:block;}还有种方法就是给父级设置fontsize:0,logo先不设置block转自:https://www.fengjinwei.com/blog-847722.html..._上下图片之间的间距不同

Kafka 配置信息解读_kafka configuration property queue.buffering.max.k-程序员宅基地

文章浏览阅读257次。1. Broker 配置信息 属性 默认值 描述 broker.id 必填参数,broker的唯一标识 log.dirs /tmp/kafka-logs Kafka数据存放的目录。可以指定多个目录,中间用逗号分隔,..._kafka configuration property queue.buffering.max.kbytes is a producer proper

wangeditor: 上传图片+上传视频+上传附件(自定义)完整使用_wangeditor上传图片-程序员宅基地

文章浏览阅读1.6w次,点赞6次,收藏33次。wangeditor: 上传图片+上传视频+上传附件(自定义)完整使用一:项目需求:①角色为管理员可以新增编辑文章 + ②点击可以看文章详情 +③ 角色为管理员可以修改编辑文章二:效果:①角色为管理员可以新增编辑文章步骤:①下载安装相关依赖 npm i wangeditor --save②引入③初始化创建编辑器代码中的initialEditor函数④自定义上传附件按钮主要思路:在编辑器上增加新的菜单按钮 --》实例化按钮 --》结合an..._wangeditor上传图片

telnet远程登录服务器端口,telnet端口号-TELNET服务的端口号是多少?-程序员宅基地

文章浏览阅读1.3w次。源端口是大于的随即端口,目的端口是23。telnet的默认端口号是多少查看端口在windows/xp/server中要查看端口,可以使用netstat命令:依次点击“开始→运行”,键入“cmd”并回车,打开命令提示符窗口。在命令提示符状态下键入“netstat-a-n”,按下回车键后就可以看到以数字形式显示的tcp和udp连接的端口号及状态。小知识:netstat命令用法命令格式:netstat-..._telnet源端口和目的端口

推荐文章

热门文章

相关标签