首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

WordPress 主题教程 #5b:日志内容

日志内容是从零开始创建 WordPress 主题系列教程第五篇的第二部分,在这篇中,我们将展示如果显示博客日志的内容,并且使用一个 DIV 标签把博客日志的内容和日志的标题区分开。...还记得最开始说到的 style.css 这个文件吗?我们以后用它来控制所有页面元素的显示和布局。...注意这些代码是不依赖具体的 WordPress 主题,我们应该自己的这些文本和图片进行编码和样式化。 还有,有没有注意到我圈出的开启和关闭的P标签。...我们可以通过 P (段落,paragraph)标签,每个段落会在 P 标签之间,这就是为什么段落之间有行距的原因, 如何使用 - 非常容易,WordPress 模板系统会自动帮我们产生 P 标签。...实际上的代码不像我上面的屏幕截图一样有红色或者绿色的高亮显示,我们需要有个能够跟踪代码的方法,通过缩进就能更容易知道哪个 是结束哪个 。

82680
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    WordPress 主题教程 #5c:日志元数据

    日志元数据是从零开始创建 WordPress 主题系列教程的五篇的第三部分,今天我们将开始讲解日志的元数据(Postmetadata):日期(date),分类(categories),作者(author...同样请打开 XAMPP,主题文件夹,浏览器以及 index.php 文件,先让我们复习下,现在的 index.php 文件应该有下面这些代码了: 把主题教程源代码 postmetadata.txt 文件中的代码复制到...php the_content(); ?> 下面。(注意:这里我们只需要复制和粘贴,当我制作 WordPress 主题的时候,我也只是复制和粘贴这部分代码。...下面的屏幕截图是为了适应日志的大小而只裁剪了一部分,它主要你关注日志元数据代码的位置: 保存并刷新浏览器,现在应该是: 我们同样可以通过查看源代码来看日志元数据是怎样的?... - 如果你想要一个空行,又不想用段落标签来产生行间距,使用 BR。注意斜线 / 。这是能自我关闭的标签。 <?

    33030

    给WordPress文章添加类似说说的状态样式

    先说明一下,本文所说的是在本博客所用主题上加以修改的哈,其他主题的博客使用的时候可以根据需要修改,下面我也会提及一些。...--post--> 注:别的主题使用的时候请修改一下类似上面代码中 <?php the_content( __( '','Readd' ) ); ?...> 当然,有时候我们主题喜欢中英文混输的日期显示格式,对于使用中文版 WordPress来说,这个就要做一些小小的调整了。...这里以显示日志时间的月份为例,我们在主题中使用 the_time( ‘M’ ) 应该可以打印出一个 Sep 的英文简写的月份值。...> 这个时候我们就发现得到了我们需要的时间格式了。 好吧,暂且我就知道这么多了,我已经把我会的都贴了出来了。:)

    1.4K30

    使用 WordPress 自定义字段来实现文章缩略图

    是的,WordPress 自定义字段使用的好,能够把 WordPress 博客转变成一个完全定制化的 CMS 站点。...这篇就来讲讲 WordPress 自定义字段的一个非常广泛的用途:使用 WordPress 自定义字段来实现文章缩略图。...首先应该能够上传图片到你的服务器,可以通过 FTP 工具或者在 WordPress 后台通过其他任何 WordPress 插件上传图片。...(目前我们给客户制作的主题不用那么复杂,直接从后台直接就可以上传缩略图)。 在撰写新文章的页面,向下滚动到一个叫做自定义字段(Custom Fields)的地方,点击按钮展开它。...现在打开当前主题的 index.php 文件,搜索到下面这行: the_content('Read the rest of this entry &raquo;'); ?

    69120

    WordPress面试题

    主题 wordpress 的后台密码是 MD5 加密的密码怎么修改 有自己的博客网站吗?...模板标记和循环: 使用 WordPress 的模板标记,如the_title()、the_content()等,在模板中显示文章的标题、内容等。...使用WP_Query等函数创建自定义循环,显示特定条件下的文章。 响应式设计: 使用媒体查询或使用框架(如 Bootstrap)来确保主题在不同设备上都有良好的显示效果。...问题四 将前端三剑客(HTML、CSS、JavaScript)嵌入到 WordPress 主题可以通过以下步骤进行: 了解 WordPress 主题结构: 首先,了解 WordPress 主题的结构,这样你就知道在哪里添加你的前端代码...网站成为了自己的一个名片,在上面写写东西,记录生活,分享知识,把自己想与他人展现的技能放在博客上,何尝不是一件有趣的事情!

    40040

    编写自己的 WordPress 模板

    这会告诉 WordPress 仪表板有关主题详细信息和元信息的信息。...你会在主题集中找到WP Start。 继续并激活此主题,然后访问该站点。瞧!从技术上讲, 你自己创建了一个自定义主题。当然,它除了有一个空白的屏幕之外什么都不做。...(从技术上讲,我们在 php 文件中编写 HTML。所以我们将 HTML 嵌入到 php 代码中)。 所以 header.php,加上一些额外的代码,就变成了; 我们可以使用这个概念来显示我们的列表。这就是我的做法。...如果有需要更正的地方,请告诉我们!如果 你对进一步改进有任何反馈或建议,我们也将不胜感激。 我们很想看看 你通过这篇文章学到了什么。因此,请分享指向 你的第一个 WordPress 主题的链接。

    1.4K30

    WordPress 如何免插件实现代码高亮

    还有一个吸引人的就是简单,使用它进行代码高亮时,不需要指明语言类型,Prettify 会自动判断并处理。...prettify/r298/prettify.js CSS 地址:https://cdn.bootcdn.net/ajax/libs/prettify/r298/prettify.css CSS 文件只包含代码高亮样式主题...二、修改 functions.php 文件 打开 WordPress 主题文件中的 functions.php 文件,在末尾 ?> 前添加如下代码。...三、修改header.php文件 打开 WordPress 主题文件中的 header.php 文件,在 标签前添加如下代码,用来加载主题样式,也只在文章页加载。 " /> 到这里 WordPress+Prettify 免插件纯代码实现文章代码高亮设置就结束了。我们在编写文章时把代码放在 pre 标签内即可。

    60920

    Genesis框架从入门到精通(7): 框架的过滤器

    我们姑且把它们分为字符串和数组。从技术上讲,这样说可能有点过于简单,但对于我们现在要涉及的内容来说,这已经足够了。如果你想深入了解,请查看PHP手册 。...上面的代码看起来好像有很多东西,但实际上只是打印字符串, __() 是用于把这个字符串翻译成其它语言的函数。...为了演示,我们将会弄的复杂一点 改变主题的页脚文字是最常见的需求之一。有一个方便的插件Genesis Simple Edits可以处理,但它不支持使用PHP。那么让我们看看是否可以使用过滤器。...请记住,任何包含纯文本的html都要放在单引号中,但php代码必须在引号外面。要构建字符串,请在字符串值之间使用连接符“.”。...我确信你看到这里,应该能感受到这个简单的函数的方便之处了吧,当你有一个字符串,你想修改它其中的某部分的时候,你可以使用过滤器。 注:这里可以看一下怎么用动作来实现,做一个对比: <?

    86120

    彻底解决WordPress 中 半角全角字符转义 的问题

    WordPress中会默认会自动转义一些字符,如将‘--’转义为‘-’破折号,网络上也称“转换全半角标点符号”或者“代码转义”。...因为Wordpress 会智能地将源代码中的所有半角符号自动修正为全角符号,以防止外部源代码在网页上执行。这个功能所带来的麻烦就是在输入代码后,显示的不是原始代码,被人复制粘贴使用就会有问题。...结合Jeff的使用经验,结合网络上相关代码,以下给出终极攻略: 移除wptexturize()函数 WordPress作怪的函数就是wptexturize(),点这里查看WordPress官方说明。...将下面的代码加入主题的funtions.php文件的最后一个 ?...更改编辑器默认视图为HTML/文本 WordPress默认的是,在后台新建文章后,编辑器就自动跳转到“可视化”视图。如果我们更改编辑器默认视图为HTML/文本,就不会因为要切换模式而导致代码转义了。

    2.4K50

    WordPress前端html代码压缩优化,附对应知更鸟主题压缩报错的解决方案

    今天,逛松果博客的时候,看到了他分享的《wordpress 通过代码压缩网页》一文,让我想起了其实张戈博客之前也用过这个功能,当时是在 WP 迷博客看到的纯代码版本,用了之后发现和知更鸟主题会产生冲突,...Ps:使用知更鸟主题的博客,需要将以上代码稍微改动一下,否则首页不会被压缩,已亲测!...解决办法:修改知更鸟主题目录下的 search.php 文件,如下添加免压缩注释请: ? 完成以上步骤,知更鸟主题的博客应该可以修复因为 html 代码压缩带来的错误了!...--wp-compress-html-->';      }     return $content; } add_filter( "the_content", "Code_Box" ); 本文主要为了修正网络上对...WordPress 前端 HTML 代码压缩优化方法中的错误,以及知更鸟主题下的兼容修复方法。

    1.2K60

    WordPress 通过模板文件和自带的函数引入 cssjs 的两种方法

    WordPress 引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的 css,js,甚至很有可能还需要加载 Jquery 文件,网上方法特多,说法不一,我们今天借鉴 wordpress...下面的示例代码中,先在 init action 上把所有需要用到样式表都注册一遍,之后不管想在哪里引入,都可以简单的用 wp_enqueue_style( $handle ) 来加载。...在 WordPress 中,注册样式是“可选的”。如果你的样式不会被其他插件使用,或者你不打算使用任何代码来再次加载它,你可以自由地排队样式而不需要注册它。继续看看它是如何实现的。...很显然,我只需要在这唯一一个页面使用这部分代码,所以将这段代码直接放在这个页面模板中是最好的做法。...> 告诉 WordPress 需要加载 jquery.js,WordPress 在 wp_footer() 中处理的时候也会先检查前面是不是已经有了,如果有了就不会再重新加载一次。

    1.8K30

    erdaoo 的 WP Theme 教程学习笔记

    学习本教程,需要: 对PHP,WP,CSS,PS有一定的基础,懂得初步的应用。 你是一个想要表现自己的家伙,并且不想再使用别人制作的主题。 你要有耐心,细心,细心,耐心。...WP 主题简介 在详细分解代码之前,我们还是要先了解一下WP主题的大致情况。...对于每一个集成模块中的内容,理论上是可以随意放置的,比如我们可以把header模块中的搜索栏放在sidebar模块中去。 那如何区分这四个集成模块呢?看以下代码。...实际上它是 WordPress 的hook。 窗体化侧边栏 我们也可以把第三部分的代码另存为一个新的文件 -- sidebar.php,在index.php中填加一句代码就可以使用侧边栏 <?php get_sidebar(); ?

    60330

    WordPress删除头部wp_head()多余代码

    下面就来说说这个问题,文章来源于某篇翻译的国外文章,原文转载译文:头部的冗余代码非常之多,也一度不知道这些代码是有什么作用、怎么来的和怎么删除。...> 把这段代码插入到主题的functions.php文件下,可以清除WordPress头部大量冗余信息。如有必要,可以看看这些代码的具体意义,以免删除某些你想保留的功能。...二、wp_head函数 wp_head() 是wordpress的一个非常重要的函数,基本上所有的主题在header.php这个文件里都会使用到这个函数,而且很多插件为了在header上加 点东西也会用到...、第一篇文章、主页meta信息 WordPress把前后文、第一篇文章和主页链接全放在meta中。...>" /> 在 WordPress 2.9 发布之后,WordPress 已经默认支持这一标签了,我们无需做任何动作,主题就支持这一标签。

    2.9K80

    WordPress 主题教程 #15:子模板文件

    子模板文件是从零开始创建 WordPress 主题系列教程的第十五篇,这篇将和像上一篇创建 header.php, sidebar.php 和 footer.php 这些模板文件一样创建更多的子模板文件...创建一个新文件:archive.php 把 index.php 中所有东西复制到 archive.php 保存 archive.php 在 archive.php 文件,把 the_content 改成...(从现在开始,页面和单篇日志应该是一样的。) 保存页面和单篇日志文件,关闭它们。 第4步:定制 page.php 还记得静态页面和页面之间的不同吗?...> 是的,这是相同的用于编码页面的分页链接的代码。同样我们也可以把日志分成多篇子日志。 第二,在 postmetadata 区域,移除 在前面,存档,分类和搜索页面,我们使用 posts_nav_link() 函数去调用后一页和前一页的链接。

    43320

    明月的 WordPress 优化思路总结

    下面从我整理的几点WordPress 优化思路大家应该可以窥探一二。 一、服务器主机配置对访问速度有多大的决定性?...说会我们的主题,影响网站访问速度对服务器来说就是看同一个时间段有多少并发的http请求量需要服务器来运算处理,网站前端可以理解成同时有多少客户端访问请求。...,我多年来也只是使用 WordPress 来建站从来没有想过更换,就我那点儿早年间C/C++、PHP基础,我能理解 WordPress 代码方面有多优质(再次膜拜一下Matt·Mullenweg大神,19...作为全世界最常用的建站和博客系统WordPress来说,在性能设计上肯定不会有太大的问题,WordPress开发团队也肯定也考虑到这个问题。 那么WordPress效率问题主要是出在哪里呢?...原因有很多,比如:文章内的外链图片、插件内的外链http请求、主题代码里的外链请求等等。

    1.5K10

    WordPress4.2升级修复补丁:解决大量404请求以及评论表情路径及尺寸异常问题

    上一篇文章写到了 WordPress 升级 4.2 版本后部分主题出现了大量 404 请求的问题,匆忙解决也没深究原因。今天继续调试主题却发现了评论表情不显示了,看来又是 4.2 惹的祸了!...一、前因后果 这次 WordPress 升级 4.2 总体来说没有以前版本升级来得顺畅,目前已发现如下 3 个问题: 有部分主题的前台会产生大量的 404 错误请求(站外资源); 评论表情名称变更导致表情无法显示或者无法通过钩子更改...张戈博客上一篇文章《解决 WordPress 升级 4.2 后调用国外图片导致大量 404 请求的问题》已经粗略分享了解决办法,不过在下文中还会分享一个整体修复补丁。...老版本代码: ? 新版本代码: ? 明显把文件名称给改了,所以修复方法就是用老版代码替换新版本代码即可。 ②、表情尺寸异常 解决表情不显示问题之后,发现这表情尺寸也醉了: ?...不过 WordPress 在天朝的使用率如此之高,相信官方很快就会更新下一个版本,来修复诸如此类的问题。

    1.2K130

    为博客标题自定义字体

    这个教程应该是适用于所有的博客系统甚至是HTML网站的。方法大同小异,自己倒腾一下就好。本文用我最惯用的 Wordpress 作为例子。...当然我们先不说怎么扒 style.css,毕竟肯定又会有人看不懂。所以这次我们一步一步来。...我们右键复制这个代码块,待用。 但是在浏览器里面,我们看到字体仍然是微软雅黑,并没有使用所谓 ‘mingchao’ 字体。...如果英文读不懂可以把网址里面的 en-US 改成 zh-CN,就可以看到中文版本的了。 image.png 如果你的主题有提供 ”额外 CSS“ 选项,就可以直接在里面添加。...的字体需要使用 */ src: url(https://testing.hxco.de/FangZheng.ttf); /* 告诉浏览器这个字体从哪里找到 */ font-weight

    2.6K40
    领券