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

如何使用PHP和Wordpress中包含的外部CSS打印特定的DIV?

要使用PHP和WordPress中包含的外部CSS打印特定的DIV,可以按照以下步骤进行操作:

  1. 首先,在WordPress中创建一个自定义页面模板。在主题文件夹中创建一个新的PHP文件,例如"custom-template.php"。
  2. 在自定义页面模板中,使用PHP代码引入WordPress的核心文件和样式表。可以使用以下代码:
代码语言:txt
复制
<?php
/* Template Name: Custom Template */
get_header(); // 引入WordPress的头部文件
wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/custom.css'); // 引入自定义样式表
?>
  1. 在自定义页面模板中,使用PHP代码输出特定的DIV内容。可以使用以下代码:
代码语言:txt
复制
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div id="custom-div">
        <?php the_content(); ?>
    </div>
<?php endwhile; endif; ?>
  1. 创建一个名为"custom.css"的自定义样式表文件,并将其放置在主题文件夹中。在该样式表中,定义特定DIV的样式。例如:
代码语言:txt
复制
#custom-div {
    /* 在这里定义特定DIV的样式 */
}
  1. 在WordPress后台,创建一个新的页面,并选择刚才创建的自定义页面模板。
  2. 在WordPress后台,将所需的内容添加到页面中,并将其保存。

通过以上步骤,你可以使用PHP和WordPress中包含的外部CSS打印特定的DIV。请注意,这只是一种实现方式,具体的实现方法可能因个人需求和主题设置而有所不同。

推荐的腾讯云相关产品:腾讯云服务器(https://cloud.tencent.com/product/cvm)和腾讯云云开发(https://cloud.tencent.com/product/tcb)。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

PHP Serialize JSON 区别和在 WordPress 如何使用

​在 PHP ,Serialize JSON 是 PHP WordPress 开发数据处理常用方法,那么它们有什么区别呢?在 WordPress 如何使用​呢?...使用 Serialize 进行编码后,大小大概是使用 JSON 编码1.5倍,这是因为 Serialize 后字符串包含了子串长度,并且有更加详细类型区分,而 JSON 只有四种类型,并且是以简单符号表示...JSON 无法存储对象原始 class,解码时候,只能解码成 stdClass 实例。另外在 JSON 也无法使用 __sleep() __wakeup() 魔术方法。 4....PHP 原生 unserialize  serialize 函数,定义了 maybe_unserialize  maybe_serialize 函数。...JSON 处理相关函数大全 JSON 处理是 WordPress 开发经常需要处理一项工作,为此,WordPress 定义了一堆 JSON 处理函数,今天做一下统一介绍。

5.8K30

如何在vue组件引入外部cssjs文件

使用vue框架开发时,我们都知道一个组件可以同时写HTML、css、js代码,只需三个标签而已,如下: 但是要真把所有的代码都写入一个组件文件当中,那么代码量是非常大...,极不便于修改维护,这时就需要把css样式js代码写到其他文件下,再引入组件当中。...具体方法如下: 在组件引入css文件: @import url(css文件路径) 在组件引入js文件: 首先需要将我们js模块“抛出”,让其他文件能获取到...;如下, function home() { console.log("我是js文件") } export { home } 其次在需要导入文件导入; ...如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

8.4K20

编写自己 WordPress 模板

在整个开发过程遵循概念设计,可以是 PSD 或 HTML CSSPHP 编程一点介绍。但是,这不是此特定帖子必需品,但仍然推荐。...一个 WordPress 主题至少需要两个文件存在——style.css index.php 所以进入 wpstart 文件夹并创建这两个文件。在 style.css ,插入以下注释。...这里要提到另一件事是,我在文件中使用了“硬编码”子部分,如“联系人”“链接” footer.php。相反, 你可以使用 WordPress 小部件来自动化并使它们直接通过定制器进行修改。...在我们例子,我们将使用存档链接社交媒体链接。同样,WordPress 小部件比“硬编码”垃圾要好得多!但为了清楚起见,我们将坚持后者。...Loop是一种功能, 你可以使用它动态地将内容插入到 你主题中。我们在本教程目标是将所有博客文章呈现为一个用户友好列表,以便读者可以选择其中任何一篇。让我们看看我们是如何做到

1.4K30

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

> 注:别的主题使用时候请修改一下类似上面代码 <?...在修改过程,我们难免会用到时间函数,这当然就涉及到了WordPress 时间格式。...php the_time('Y年n月j日l'); ?> 当然,有时候我们主题喜欢中英文混输日期显示格式,对于使用中文版 WordPress来说,这个就要做一些小小调整了。...这里以显示日志时间月份为例,我们在主题中使用 the_time( ‘M’ ) 应该可以打印出一个 Sep 英文简写月份值。...但是幸运而又不幸地是,WordPress 会非常人性化地为你翻译成“九”,说幸运,是因为 WordPress 智能化让人感到高兴,说不幸是因为我确确实实就需要 Sep 这样英文简写时间格式,这让我如何是好

1.3K30

WordPress添加简书风格连载目录和文章导航

我仔细看了下Genesis Sampledemo示例貌似是没有自带这个效果,所以这个需要自己实现一下。方法挺多,用纯CSS也可以,用jQuery也可以,用Vue.js也可以。...纯CSS太难为我了,CSS对我来说都是黑魔法,想想就是一件很痛苦事,放弃。用Vue.js也是可以,但本次还是决定使用WordPress自带jQuery。...第一步 前后文章链接 Genesis框架里面其实已经包含了这个功能,要在文章自动插入前后文章链接,只需要在子主题function.php中加入一句: ?...那两个用法是一样,区别是previous_post_link next_post_link只自动打印出来,这样就不好做条件判断了。...第二步 添加模态对话框 这一步很简单,直接把remodalJavaScript文件CSS文件下载下来,扔进子主题js文件夹里,注册到WordPress里就行了,都不需要在写额外js文件来初始化或者运行这个插件

2K20

如何轻松自定义WordPress登录页面

Ø版本WordPress多年发展,默认登录屏幕设计没有改变,仍然是简单干净是在不同屏幕尺寸作品。...关于WordPress好处是后端每个部分都可以通过使用php 函数进行自定义。 在今天教程,我将向您展示如何以您希望方式自定义WordPress登录屏幕。...首先,我们将更改徽标,然后更改配色方案其他一些元素。让我们开始吧。 默认WordPress登录屏幕 ? 我们要建立什么 ? 更改徽标 WordPress使用CSS来显示背景图像。...它通常插在H1锚标签之间。但是,对于本教程,我们将在二十四个WordPress默认主题中使用functions.php文件。 ?...首先,我们需要在二十四个WordPress默认主题CSS文件夹创建样式表(对于本教程,我将样式表命名为custom-login-styles.css),然后在functions.php文件添加以下钩子

2.7K20

WordPress主题制作(四):制作头部模板header.php

当我们用文本编辑器打开从WordPress主题制作:开始前准备下载Yii-Candy .php 文件,不难看出他们头部代码都非常相似!...我们可以提取这部分相似的代码,放到一个单独文件header.php,各个页面想用这部分代码时候再用WordPressget_header()包含进去就可以达到所有页面头部内容一致,不再需要给每个页面都写一次这部分代码了...header.php代码(不同主题头部代码可能不太一样,在你实际项目中可以自定如何书写): " type="text/css" media="screen" /> 博客名称描述 在header.php,下面两行代码用于显示博客名称描述: <h1 id="logo" class="grid...现在总结一些今天讲到<em>的</em>比较重要<em>的</em>知识点: get_header() 从当前主题文件夹<em>中</em><em>包含</em>header.<em>php</em>文件 is_home(),is_single(),is_category()等几个条件判断标签

1.2K20

WordPress开发人员犯12个最严重错误

1.将WordPress主题JavaScript代码放入一个主文件 有一次,在为客户网站做页面速度优化时,我注意到他们使用了一个高级主题,这个主题包含了所有他们正在使用库,包括定制代码,在一个名为...此外,客户可以使用Git来跟踪由该特定项目聘用所有开发人员完成所有工作历史记录,特别是如果它是一个大型长期WordPress自定义网站。...9.使用.php文件输出CSS或JavaScript代码而不是静态.css.js文件 我已经看过主题,甚至是WordPress插件,其中有这样文件style.php只是用来生成自定义CSS代码并打印出来...2.在PHP文件,代码(CSS规则与PHP变量条件子句混合)在开发人员需要检查时难以阅读。...当然,该文件可以在浏览器运行(虽然我确定打印时,甚至不会缩进或漂亮),但是如果您有本地项目副本并浏览主题代码,并且需要找到一个CSS或JavaScript语法(在使用script.php情况下)

2.9K10

WordPress主题开发基础:Body 类指南

这使您可以动态地找出用户正在查看页面,然后相应地添加CSS类。 通常,大多数入门主题框架已经在HTML body标签内包含了body类功能。...您可以自定义特定作者个人资料页面,基于日期档案等。 现在让我们看一下如何以及何时使用body类。...何时使用WordPress body类 首先,您需要确保主题body元素包含如上所示body类函数。如果确实如此,那么它将自动包括上述所有WordPress生成CSS类。...在向您展示特定用例场景之前,我们将向您展示如何使用过滤器添加body类,以便每个人都可以在同一页面上。...由于body类是特定于主题,因此您需要将以下代码添加到主题functions.php文件

2.1K20

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

> 但是 WordPress 不能确定是否在在页面加载了 JS,Css 文件,如果另一个插件使用相同 JS,Css 文件,就无法检查 JS,Css 文件是否已经被包含在页面。...其他函数将使用这个“handle”来排队并打印样式表。 $src(字符串,必需)指的是样式表URL。...在 WordPress ,注册样式是“可选”。如果你样式不会被其他插件使用,或者你不打算使用任何代码来再次加载它,你可以自由地排队样式而不需要注册它。继续看看它是如何实现。...还有我们可以使用各种用途三个动作钩子: wp_enqueue_scripts 用来在网站前台加载脚本CSS admin_enqueue_scripts 用来在后台加载脚本CSS login_enqueue_scripts...5、一些额外函数 WordPress 有一些关于 CSS 非常有用函数:他们允许我们打印内嵌样式,查看样式文件排队状态,添加元数据以及注销样式。

1.7K30

每天一个WordPress文件:wp-config.php

wp-config.phpWordPress 用来保存配置信息地方,包含网站基础配置详细信息(如数据库连接信息),它是 WordPress 最重要文件之一,该文件位于 WordPress 文件目录根目录...原始下载下来 WordPress 安装包里面并不包含 wp-config.php 文件,WordPress 会通过安装步骤让你一步一步输入你网站信息进行创建。...自动保存 WordPress 会在你撰写日志时候,使用 AJAX 自动保存日志修订到数据库。...define( 'WP_DEBUG_DISPLAY', true ); // 直接在页面上显示错误 log 如果想去 debug 默认 JS CSS 文件,可以在 wp-config.php 文件添加下面的代码...: define( 'SCRIPT_DEBUG', true ); 这样,wp-includes/js, wp-includes/css, wp-admin/js, wp-admin/css 这些文件夹未压缩版本

69130

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

日志内容是从零开始创建 WordPress 主题系列教程第五篇第二部分,在这篇,我们将展示如果显示博客日志内容,并且使用一个 DIV 标签把博客日志内容日志标题区分开。...我使用是 Firefox浏览器,下面是在 FireFox 显示样子: 你注意到 index.php 文件和它源代码之间区别了吗?...他们都没有在 index.php 文件中出现,但是他们在源代码中出现了。 P 标签,为什么如何使用? 为什么 - 当我们输入日志时候,每次跳过一行就是一个段落,这个时候需要一个方法去展示?...我们可以通过 P (段落,paragraph)标签,每个段落会在 P 标签之间,这就是为什么段落之间有行距原因, 如何使用 - 非常容易,WordPress 模板系统会自动帮我们产生 P 标签。..."> 你现在 index.php 文件应该是: 保存并刷新浏览器,我们再次去查看源代码的话,就会发现每篇日志内容在 class=”entry” DIV 标签

81180

WordPress 主题教程 #14:底部拆分 Index

底部拆分 Index是从零开始创建 WordPress 主题系列教程第十四篇,这篇我们完成对主题样式化开始把 index.php 文件分成多个小文件。...在这篇,首先要对 style.css 文件进行修改,然后把 index.php 分成一些新文件。 打开 XAMPP,主题文件夹,Firefox,IE,index.php style.css。...第1步:样式化 footer 给 footer DIV 增加 10px 顶部填充。你还记得如何增加填充?这次我不提供代码。...php get_header(); ?> 这是个 WordPress 主题系统特别用来导入 header.php 文件函数,而不用使用 PHP 函数:<?...把 index.php 文件 Sidebar DIV 从开始到结尾都复制到 sidebar.php 文件。 那么,在 index.php 文件,将其取代为:<?

29210

Wordpress主题修改logo导航位置

使用Wordpress设置公司网页时候,因为导航栏产品层次太多,导致展开无法显示完全,故需要将logo导航位置进行调换第一步,在网页中找到头部div标签图片可以看到第一个div标签设定一个网格布局...,包含有两个div标签,这两个div是我们logo导航,打开Wordpress后台,进入-外观-主题文本编辑器-在右侧找到header-row.php路径:template-parts/header.../builder/header-row.php,注意:我使用是Astra主题,使用其他主题可能不一样,需要自行测试主要修改内容如下:找到两个div位置调换即可点击保存文件但保存后发现导航logo离太近,不好看,调整网格布局之间间隔在网页中点击检查找到CSS路径文件:astra/assets/css/minified/main.min.css

44040

基于 Laravel + Vue 组件实现文件异步上传

我们在上一篇教程已经演示了如何通过 Request 请求实例获取各种文本输入数据,但是还有一种输入数据我们没有涉及到,那就是文件上传。...Vue 组件代码了,既有 HTML 模板代码,又有 CSS JavaScript 代码,代码逻辑很简单,就是监听到文件上传控件有变动时调用 uploadFile 方法,通过 axios 发送包含文件信息...我们使用了 Storage::disk('public') 磁盘将上传文件保存到本地,关于该磁盘自定义配置信息可以去 config/filesystems.php 文件查看,我们将其保存到此磁盘原因是图片一般都是提供对外访问...,如果上传是其他格式私密文件,不想被外部访问,需要将其保存到 local 磁盘,你还可以将其保存到云存储服务,关于完整文件系统我们放到后面去讲,现在你只需了解保存到哪里,以及如何配置自定义路径。...如果要让上传到 storage/app/public 目录文件可以被外部访问,还要执行以下命令: php artisan storage:link 该命令会在项目根目录下 public 创建一个软链

2.6K20

WordPress 主题教程 #16:留言模板

你应该知道: 没有快速方式在 comments.php 建立评论模板 大部分 WordPress 设计者使用来自 WordPress 默认主题(Kubrick)默认评论模板根据。...第2步:样式化留言 把我 comments-template-css 文件内容拷贝到你 style.css 文件。 复制到 style.css 底部或者刚好 #footer 上面。...第3步:在 single.php 添加留言模板 在 single.php 文件,entry DIV 下面,输入以下代码: <?...在 single.php 文件,你用 comments-template DIV 围住comments_template()。现在你评论模板在一个 DIV 标签一个有序列表。...不像 comments.php 文件代码,你可以随便测试你 CSS 代码而不会弄坏留言模板。自己去测试回比我解释对你更有好处。

67720
领券