我是Wordpress开发的新手。我正在学习开发一个新主题。我知道, 对于wordpress主题, 只有两个绝对必要的文件。为了进行测试, 我创建了一个index.php文件和style.css文件, 并尝试将其用作主题。但是我在这样做时面临着问题。
正在读取index.php文件, 并且其内容显示在主页上, 但是没有从style.css文件中加载CSS。正在阅读第一条评论, 因为可以在主题详细信息部分中看到主题信息, 但未加载CSS。
我遇到两种错误, 首先
“
无法加载资源:服务器响应状态为404(未找到)”
。请参阅图像:
文章图片
【WordPress不读取样式表】并且, “ 获取http://rockstargaming.hol.es/style.css net :: ERR_ABORTED 404(未找到)”
文章图片
最初, 我试图包括样式表thorugh < link> 标记, 但是在收到错误后, 我尝试了另一种方法来使脚本入队-通过funstions.php文件, 但是随后我什么也没看到, 没有错误并且没有样式。
似乎没有任何效果, 我尝试多次进行所有操作。
index.php:-
<
!doctype HTML>
<
html lang="en">
<
head>
<
meta charset="utf-8">
<
title>
Gym<
/title>
<
link rel="stylesheet" href="http://www.srcmini.com/style.css">
<
/head>
<
body>
<
div>
Testing theme development
<
/div>
<
div class="top-ribbon top-ribbon-left">
<
/div>
<
div class="top-ribbon top-ribbon-right">
<
/div>
<
/body>
<
/html>
style.css
/*
Theme Name: GymTheme
Author: SamarpitShrivastava
Author URI: https://www.google.com
Version: 1.0
*/html, body{
margin: 0;
padding: 0;
font-size: 10px;
background-color: #1f1f1f;
}/*Upper Ribbon*//*Phone*/
.top-ribbon-left{
background-image: linear-gradient(45deg, #ffd900, #ffb700);
width: 81%;
height: 13em;
float: left;
position: absolute;
margin-left: -3em;
transform: rotateZ(-10deg);
z-index: 1;
box-shadow: 0 0 5 5 yellow;
}.top-ribbon-right{
border-top: 18em solid #ffb700;
width: 0;
height: 0;
border-left: 35em solid transparent;
float: right;
position: absolute;
right: 1em;
margin-right: -3em;
margin-top: -0.5em;
transform: rotateZ(6deg);
z-index: 200;
}
/*Phone*//*Tablet*/
@media only screenand (min-width: 800px){
/* For Tablets: */.top-ribbon-left{
background-image: linear-gradient(45deg, #ffd900, #ffb700);
width: 80%;
height: 17em;
float: left;
position: absolute;
margin-left: -3em;
transform: rotateZ(-10deg);
z-index: 1;
}.top-ribbon-right{
border-top: 25em solid #ffb700;
width: 0;
height: 0;
border-left: 49em solid transparent;
float: right;
position: absolute;
right: 1em;
margin-right: -3em;
margin-top: -1em;
transform: rotateZ(6deg);
z-index: 200;
}}
/*Tablet*//*Desktop*/
@media only screen and (min-width: 1300px) {
/* For desktop: */.top-ribbon-left{
background-image: linear-gradient(45deg, #ffd900, #ffb700);
width: 80%;
height: 20em;
float: left;
position: absolute;
margin-left: -3em;
transform: rotateZ(-10deg);
z-index: 1;
}.top-ribbon-right{
border-top: 30em solid #ffb700;
width: 0;
height: 0;
border-left: 60em solid transparent;
float: right;
position: absolute;
right: 1em;
margin-right: -3em;
margin-top: 0em;
transform: rotateZ(6deg);
z-index: 200;
}}
/*Desktop*//*Upper Ribbon*/
functions.php
<
?phpfunction includeResources(){
wp_enqueue_style('style', get_stylesheet_uri());
}add_action('wp_enqueue_scripts', 'includeResources');
?>
这实际上是它的外观:
文章图片
#1 问题是你将样式路径错误地添加到标题。示例:bluebezer.com.br/style.css
你应该指向主题所在的css文件夹, 而不是网站的根目录。示例:bluebezer.com/wp-content/themes/你的名称/style.css
要获取主题的路径, 请使用功能get_template_directory_uri()
<
html <
?php language_attributes();
?>
>
<
head>
<
!-- ... other codes ...-->
<
link rel="stylesheet" type="text/css" href="http://www.srcmini.com/<
?php echo get_template_directory_uri() .'/style.css';
?>
" />
<
!-- This wp_head function must be present in all wordpress headers. -->
<
?php wp_head();
?>
<
/head>
但是添加wordpress样式的正确方法是通过在functions.php中创建一个函数并添加类似于以下代码的代码:
add_action( 'wp_enqueue_scripts', 'wpsites_new_style_sheet' );
function wpsites_new_style_sheet() {
//registering a new style in wordpress
wp_register_style( 'new-style', get_template_directory_uri() .'css/new-style.css', array(), '1.0');
//stating that the new style should be displayed in wordpress
wp_enqueue_style( 'new-style' );
}
重要的是要注意, 此函数将通过wp_head()自动调用网站标题的样式;功能; 应该出现在所有wordpress主题标题中。
wp_head(); 函数负责自动显示标题, 脚本, 样式, 目标以及来自插件, 操作和wordpress面板设置的其他信息。然后, 它必须出现在所有wordpress标头中, 否则在开发过程中会遇到各种错误和困难。
另一个重要的事情是函数:wp_footer(); 它负责调用额外的信息, 例如脚本和类似于wp_head()的其他设置;并且她必须始终出现在示例的页脚中:
<
!-- ... other codes ...-->
<
?php wp_footer();
?>
<
/body>
<
/html>
#2 你的样式表不在WordPress安装的根目录(/style.css)中, 而在主题目录中。这就是为什么你不应在wp_enqueue_scripts操作中使用HTML链接属性, 而应使用wp_enqueue_style函数的原因。你可以为此使用官方的WordPress指南。
此外, 你的functions.php无效, 因为style.css没有声明为字符串。应该抛出PHP错误。更改此wp_enqueue_style(‘ style’ , style.css, false); 到wp_enqueue_style(‘ style’ , get_stylesheet_uri()); 。此外, 由于输入错误, 你要包含的功能不存在。将函数重命名为includeResources而不是inculdeResources(切换u和l)。
推荐阅读
- WordPress Oceanwp是否在我的网站中发生
- WordPress不显示没有插件的对象GoogleMapsAPI
- WordPress无法识别/themes/文件夹中的主题
- WordPress不会转到自定义帖子类型页面
- WordPress不会导出或导入特色图片
- Word新闻不显示主题
- wordpress新主题自定义otf字体
- WordPress多站点到单个站点-主题如何容纳新的WordPress版本()
- 快乐就完事