我正在使用以下代码尝试使用高级自定义字段插件从分类术语中检索名为"图像"的图像字段.此代码基于ACF网站上的文档.
应该注意这个代码是在taxonomy.php模板中使用的,我无法指定特定的分类和/或术语,因为我需要代码来检测当前的分类和术语,基于用户点击的页面和至.
任何帮助非常感谢!
<?php get_header(); ?>
<?php get_sidebar(); ?>
<section id="hero-image">
<div class="gradient-overlay">
<?php
// vars
$queried_object = get_queried_object();
$taxonomy = $queried_object->taxonomy;
$term_id = $queried_object->term_id;
// load thumbnail for this taxonomy term (term object)
$image = get_field('image', $queried_object);
// load thumbnail for this taxonomy term (term string)
$image = get_field('image', $taxonomy . '_' . $term_id);
?>
</div>
<div class="grid">
<header class="unit full-width">
<a href="<?php echo home_url(); ?>/" title="Kurdistan Memory Programme" class="logo"><?php bloginfo( 'name' ); ?></a>
</header>
<footer class="unit …Run Code Online (Sandbox Code Playgroud) 我试图在通过 PurgeCSS 处理时保留所有 TailwindCSS 颜色类(即 bg-green、bg-red、text-green、text-red)。这些颜色类是在 CMS 中设置的,而不是在代码中设置的,因此我们无法搜索它们的代码,因为它们(全部)不存在于此处。
因此,我想使用PurgeCSS的白名单功能来保留所有以 'bg-' 或 'text-' 开头的类。但是,我下面的模式似乎并没有奏效?任何想法如何调整它?
whitelistPatterns: ['^bg\-', '^text\-'],
Run Code Online (Sandbox Code Playgroud) 我正在尝试将安全列表模式(以前称为白名单模式)与 Tailwind CSS V3.1.6 一起使用,并具有以下内容。它不起作用,但本质上我试图将所有以bg-,text-和开头的值列入安全名单border-
safelist: [
// Retain all classes starting with...,
{
pattern: /bg-/,
pattern: /text-/,
pattern: /border-/,
},
],
Run Code Online (Sandbox Code Playgroud) 我已经在 Wordpress 中注册了一个自定义分类法,但我无法弄清楚为什么它没有显示在标准的 Wordpress 帖子中,因为已经引入了 Gutenberg。我的意思是,在添加或编辑帖子时,它不会显示在文档侧栏中。'Categories' 和 'Tags' 也是如此,它们显然是标准分类法。
我已经确保 'show_in_rest' => true 存在是分类法注册,但它没有任何区别。
似乎他们正在部分注册,因为它们显示在主左侧菜单的“帖子”下,这表明它可能与古腾堡有关?
有任何想法吗?
// Register taxonomy
add_action( 'init', 'register_taxonomy_articles_element' );
function register_taxonomy_articles_element() {
$labels = array(
'name' => _x( 'Elements', 'articles_element' ),
'singular_name' => _x( 'Element', 'articles_element' ),
'search_items' => _x( 'Search Elements', 'articles_element' ),
'popular_items' => _x( 'Popular Elements', 'articles_element' ),
'all_items' => _x( 'All Elements', 'articles_element' ),
'parent_item' => _x( 'Parent Element', 'articles_element' ),
'parent_item_colon' => _x( 'Parent Element:', 'articles_element' ),
'edit_item' => _x( 'Edit …Run Code Online (Sandbox Code Playgroud) 我正在实现一个非常简单的预加载器页面,该页面在主页面内容完全加载之前一直存在。加载页面工作正常,但我只是在预加载页面就位之前暂时显示主页内容有一个小问题,导致内容出现难看的闪光。
我在下面提供了一个实时链接,因为由于需要加载时间,因此很难在小提琴中复制,任何人都可以提供一些有关如何确保预加载器页面始终首先加载的见解吗?
谢谢。
HTML
<div class='preloader'>
<div class="preloader-logo">Logo</div>
<div class="preloader-loading-icon">Loading</div>
</div>
<main>Content goes here, should be hidden initially until fully loaded.</main>
Run Code Online (Sandbox Code Playgroud)
CSS
.preloader {
display: block;
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
z-index: 9999;
background: rgba(255,102,51,1);
}
.preloader-logo {
background: url(images/ui-sprite.svg) no-repeat 0 -300px;
position: absolute;
width: 140px;
height: 58px;
top: 50%;
left: 50%;
text-indent: -9999px;
}
.preloader-loading-icon {
background: url(images/preloader-loading.svg) no-repeat 50%;
text-indent: -9999px;
position: relative;
top: 50%;
left: 50%;
margin-top: 90px;
width: …Run Code Online (Sandbox Code Playgroud) 我正在使用background-image属性将图像分配到div我的网站上的范围.但是,对于background-image属性,我还需要指定background-size以使其看起来正确.
这主要工作正常,但我需要根据background-size属性中使用的文件类型更改background-image属性.例如,作为标准我想要用户,background-size: cover;但是当background-image我想要使用SVG时background-size: auto;
这可能是使用CSS属性选择器吗?如果没有,任何其他解决方案?
我的尝试(SCSS):
&.bg-image {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-height: 500px;
max-height: 700px;
&[src$=".svg"] { background-size: auto; }
}
Run Code Online (Sandbox Code Playgroud) 对于 Tailwind 和 PostCSS/PurgeCSS 来说相当新,所以希望这是一个相当简单的修复。
在我的 中tailwind.config.js,我扩展了一些间距值,包括添加 0.5 值以与默认的 Tailwind 间距比例对齐。我的文件如下所示(摘录):
module.exports = {
important: false,
theme: {
spacing: {
'0.5': '0.125rem',
},
},
}
Run Code Online (Sandbox Code Playgroud)
然后我使用 PostCSS 编译我的 CSS,如下所示,你可以看到我使用了一堆效果很好的插件:
module.exports = {
parser: 'postcss-scss',
plugins: [
require('postcss-import'),
require('postcss-nested'),
require('postcss-responsive-type'),
require('tailwindcss'),
require('autoprefixer'),
require('cssnano'),
]
}
Run Code Online (Sandbox Code Playgroud)
到目前为止,一切都进展顺利!但是,我想清除 css 以删除 Tailwind 创建的所有未使用的实用程序类。这对我的 postcss 文件产生如下影响:
module.exports = {
parser: 'postcss-scss',
plugins: [
require('postcss-import'),
require('postcss-nested'),
require('postcss-responsive-type'),
require('tailwindcss'),
require('autoprefixer'),
require('@fullhuman/postcss-purgecss')({
content: [
'./*.php',
'./**/*.php',
],
defaultExtractor: content => content.match(/[\w-:/]+(?<!:)/g) || []
}),
require('cssnano'),
] …Run Code Online (Sandbox Code Playgroud) 作为我们站点地图的一部分(使用WooCommerce),我们不希望在/ shop /中有一个页面.相反,我们的菜单只是直接链接到商店类别.因此,我想使用PHP来转发/购买/到我们的主要类别,即/ product-category/coffee /.
在以前的Wordpress网站上,我使用了类似于下面的内容,在专用的页面模板文件中转发用户.但是,在模板名称'page-shop.php'中使用以下代码不起作用,我留下了一个显示类别和产品的通用"商店概述页面".
代码是错误的还是我把它放在错误的模板中?
谢谢
<?php
/* Redirect /shop/ directly to coffee category */
wp_redirect( get_bloginfo('url').'/product-category/coffee/' ); exit;
?>
Run Code Online (Sandbox Code Playgroud) 我在整个客户网站上偶尔使用自动播放视频,但是下面的代码(由于某种原因)不在 Chrome 中自动播放(63.0.3239.132)。在 Safari 和 FF 中运行良好。
我也没有收到任何控制台错误?
<video src="https://player.vimeo.com/external/247833422.hd.mp4?s=8d872a36d3dbe7f74e9613ab144d088b5bab6649&profile_id=174" poster="" preload autoplay loop muted></video>
Run Code Online (Sandbox Code Playgroud) 使用核心 WP Gutenberg 块非常棒,但在某些情况下,我想完善可用选项以改善客户的用户体验,并避免他们有太多选项。
例如,在标题块中,我想删除“级别”H1 和 H6,以及所有“对齐”选项。
在段落块中,我想禁用“字体大小”和“首字下沉”选项。
我查阅了 API 文档,但没有成功。
javascript php wordpress wordpress-gutenberg gutenberg-blocks
php ×4
wordpress ×4
css ×3
tailwind-css ×3
css-purge ×2
javascript ×2
html ×1
html5-video ×1
jquery ×1
plugins ×1
postcss ×1
preloader ×1
purge ×1
video ×1
woocommerce ×1