Wordpress не читает таблицу стилей - PullRequest
0 голосов
/ 19 октября 2019

Я новичок в разработке WordPress. Я учусь разрабатывать новую тему. Я знаю, что для основных есть только два абсолютно необходимых файла для темы WordPress. Для тестирования я создал файл index.php и файл style.css и попытался использовать его в качестве темы. Но у меня возникают проблемы с этим.

Файл index.php читается, а содержимое отображается на домашней странице, но файл CSS не загружается из файла style.css. Первый комментарий читается, поскольку информацию о теме можно увидеть в разделе сведений о теме, но CSS не загружается.

Я получаю два вида ошибок, во-первых

"Не удалосьзагрузка ресурса: сервер ответил со статусом 404 (не найдено) "См. изображение: enter image description here

И" GET http://rockstargaming.hol.es/style.css net :: ERR_ABORTED404 (не найдено) "enter image description here

Сначала я пытался включить тег таблицы стилей thorugh <link>, но после получения ошибки я попытался поставить сценарии в другой способ - с помощью функций.php файл, но потом я ничего не вижу, без ошибок и без стилей.

Кажется, ничего не работает, я пытался делать все несколько раз.

index.php: -

<!doctype HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Gym</title>
        <link rel="stylesheet" href="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 screen  and (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

<?php

function includeResources(){
    wp_enqueue_style('style', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'includeResources');

?>

Вот как это должно выглядеть на самом деле: enter image description here

Ответы [ 2 ]

1 голос
/ 19 октября 2019

проблема в том, что вы неправильно добавляете путь стиля к заголовку. Пример: bluebezer.com.br/style.css

вы должны указывать на папку, в которой находится ваш css, которая находится в темах, а не в корне сайта. Пример: bluebezer.com/wp-content/themes/your-name/style.css

, чтобы получить путь к вашей теме, используйте функцию get_template_directory_uri ()

<html <?php language_attributes(); ?>>
    <head>
        <!-- ... other codes ...-->

        <link rel="stylesheet" type="text/css" href="<?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.

The wp_head ();Функция отвечает за автоматическое отображение заголовков, сценариев, стилей, целей и другой информации, получаемой из плагинов, действий и настроек панели WordPress. Затем он должен присутствовать во всех заголовках WordPress, иначе у вас будут возникать различные ошибки и трудности во время разработки.

Еще одна важная вещь - это функция: wp_footer ();Он отвечает за вызов дополнительной информации, такой как скрипты и другие настройки, подобные wp_head ();и она всегда должна присутствовать в нижнем колонтитуле примера:

    <!-- ... other codes ...-->
    <?php wp_footer(); ?>

</body>
</html>
1 голос
/ 19 октября 2019

Ваша таблица стилей находится не в корневом каталоге вашей установки WordPress (/style.css), а в каталоге вашей темы. Вот почему вы не должны использовать атрибут HTML link, а скорее функцию wp_enqueue_style в действии wp_enqueue_scripts. Для этого вы можете использовать официальное руководство по WordPress .

Кроме того, ваш functions.php недопустим, так как style.css не объявлен как строка. Ошибка PHP должна быть выброшена. Измените это wp_enqueue_style('style', style.css, false); на wp_enqueue_style('style', get_stylesheet_uri());. Более того, функция, которую вы хотите включить, не существует из-за опечатки. Переименуйте функцию в includeResources вместо inculdeResources (переключите u и l).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...