не загружаются стили

  • palzuncoff

    (@palzuncoff)


    8 лет, 7 месяцев назад

    Здравствуйте уважаемые форумчане, я хочу написать свою тему с нуля, нашел видео курс но практически в самом начале столкнулся со следующей проблемой, в index.php я добавил html + <?php wp_head();?> этот код,

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="ico/favicon.png" />

    <title>Udemy Static Template</title>

    <?php wp_head();?>

    <!-- Main CSS -->
    <link href="styles/bootstrap.css" rel="stylesheet">

    <!-- Google Font -->
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Mono:400,300,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="vendor/fastclick/fastclick.js"></script>
    <script src="vendor/modernizr/modernizr.js"></script>
</head>

<body>

<nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand rippler" href="index.html">Udemy</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#"><i class="fa fa-youtube"></i></a></li>
            </ul>
        </div>
    </div>
</nav>

<section id="blog" class="section">
    <div class="container">
        <div class="row">
            <section id="blog-posts" class="col-sm-8">

                <article class="card">
                    <div class="card-image">
                        <img src="images/blog/1.jpg" class="img-responsive">
                    </div>
                    <div class="card-content">
                        <h3>
                            <span class="date">04 Oct</span>
                            <a href="javascript:void(0);" title="">Post with Image</a>
                        </h3>
                        <div class="card-info">
                            <span class="time">Posted at 15:55h</span>
                            <span class="tag"><a href="javascript:void(0);">Business</a></span>
                            <span class="post-author">by <a href="javascript:void(0);">admin</a></span>
                        </div>
                        <p class="post-excerpt">Lorem ipsum dolor sit amet, nunc ut, doloribus orci eleifend suspendisse vulputate ridiculus donec, tempus gravida ultrices eget libero nunc.
                            Sodales molestiae nec sollicitudin, pellentesque ullam auctor duis erat, phasellus in magnis tempus.</p>
                    </div>
                    <div class="card-action">
                        <a href="javascript:void(0);" type="button" class="btn btn-sm btn-primary rippler rippler-default">Read More</a>
                    </div>
                </article>

                <article class="card">
                    <div class="card-image">
                        <img src="images/blog/1.jpg" class="img-responsive">
                    </div>
                    <div class="card-content">
                        <h3>
                            <span class="date">04 Oct</span>
                            <a href="javascript:void(0);" title="">Post with Image</a>
                        </h3>
                        <div class="card-info">
                            <span class="time">Posted at 15:55h</span>
                            <span class="tag"><a href="javascript:void(0);">Business</a></span>
                            <span class="post-author">by <a href="javascript:void(0);">admin</a></span>
                        </div>
                        <p class="post-excerpt">Lorem ipsum dolor sit amet, nunc ut, doloribus orci eleifend suspendisse vulputate ridiculus donec, tempus gravida ultrices eget libero nunc.
                            Sodales molestiae nec sollicitudin, pellentesque ullam auctor duis erat, phasellus in magnis tempus.</p>
                    </div>
                    <div class="card-action">
                        <a href="javascript:void(0);" type="button" class="btn btn-sm btn-primary rippler rippler-default">Read More</a>
                    </div>
                </article>

                <article class="card">
                    <div class="card-image">
                        <img src="images/blog/1.jpg" class="img-responsive">
                    </div>
                    <div class="card-content">
                        <h3>
                            <span class="date">04 Oct</span>
                            <a href="javascript:void(0);" title="">Post with Image</a>
                        </h3>
                        <div class="card-info">
                            <span class="time">Posted at 15:55h</span>
                            <span class="tag"><a href="javascript:void(0);">Business</a></span>
                            <span class="post-author">by <a href="javascript:void(0);">admin</a></span>
                        </div>
                        <p class="post-excerpt">Lorem ipsum dolor sit amet, nunc ut, doloribus orci eleifend suspendisse vulputate ridiculus donec, tempus gravida ultrices eget libero nunc.
                            Sodales molestiae nec sollicitudin, pellentesque ullam auctor duis erat, phasellus in magnis tempus.</p>
                    </div>
                    <div class="card-action">
                        <a href="javascript:void(0);" type="button" class="btn btn-sm btn-primary rippler rippler-default">Read More</a>
                    </div>
                </article>

                <article class="card">
                    <div class="card-image">
                        <img src="images/blog/1.jpg" class="img-responsive">
                    </div>
                    <div class="card-content">
                        <h3>
                            <span class="date">04 Oct</span>
                            <a href="javascript:void(0);" title="">Post with Image</a>
                        </h3>
                        <div class="card-info">
                            <span class="time">Posted at 15:55h</span>
                            <span class="tag"><a href="javascript:void(0);">Business</a></span>
                            <span class="post-author">by <a href="javascript:void(0);">admin</a></span>
                        </div>
                        <p class="post-excerpt">Lorem ipsum dolor sit amet, nunc ut, doloribus orci eleifend suspendisse vulputate ridiculus donec, tempus gravida ultrices eget libero nunc.
                            Sodales molestiae nec sollicitudin, pellentesque ullam auctor duis erat, phasellus in magnis tempus.</p>
                    </div>
                    <div class="card-action">
                        <a href="javascript:void(0);" type="button" class="btn btn-sm btn-primary rippler rippler-default">Read More</a>
                    </div>
                </article>

                <article class="card">
                    <div class="card-image">
                        <img src="images/blog/1.jpg" class="img-responsive">
                    </div>
                    <div class="card-content">
                        <h3>
                            <span class="date">04 Oct</span>
                            <a href="javascript:void(0);" title="">Post with Image</a>
                        </h3>
                        <div class="card-info">
                            <span class="time">Posted at 15:55h</span>
                            <span class="tag"><a href="javascript:void(0);">Business</a></span>
                            <span class="post-author">by <a href="javascript:void(0);">admin</a></span>
                        </div>
                        <p class="post-excerpt">Lorem ipsum dolor sit amet, nunc ut, doloribus orci eleifend suspendisse vulputate ridiculus donec, tempus gravida ultrices eget libero nunc.
                            Sodales molestiae nec sollicitudin, pellentesque ullam auctor duis erat, phasellus in magnis tempus.</p>
                    </div>
                    <div class="card-action">
                        <a href="javascript:void(0);" type="button" class="btn btn-sm btn-primary rippler rippler-default">Read More</a>
                    </div>
                </article>

                <nav class="text-center">
                    <ul class="pagination">
                        <li>
                            <a href="javascript:void(0);" aria-label="Previous">
                                <i class="fa fa-chevron-left"></i>
                            </a>
                        </li>
                        <li class="active"><a href="javascript:void(0);">1</a></li>
                        <li><a href="javascript:void(0);">2</a></li>
                        <li>
                            <a href="javascript:void(0);" aria-label="Next">
                                <i class="fa fa-chevron-right"></i>
                            </a>
                        </li>
                    </ul>
                </nav>

            </section>
            <aside id="sidebar" class="col-sm-4">

                <div class="card">
                    <div class="card-header bg-primary">
                        <span class="card-title">Search</span>
                    </div>
                    <div class="card-content">
                        <div class="widget">
                            <form role="search" method="get" id="searchform" class="searchform" action="http://localhost:8080/Udemy/wp/">
                                <div class="input-group">
                                    <input type="text" placeholder="Search" class="input-sm form-control" name="s" id="search" value="">
                                    <span class="input-group-btn"><button type="button" class="btn btn-sm btn-primary rippler rippler-default btn-flat with-border"><i class="fa fa-search"></i></button></span>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header bg-primary"><span class="card-title">Recent Posts</span></div>
                    <div class="card-content">
                        <div class="widget">
                            <ul>
                                <li><a href="#">Porro voluptas omnis eaque</a></li>
                                <li><a href="#">Porro voluptas omnis eaque</a></li>
                                <li><a href="#">Porro voluptas omnis eaque</a></li>
                                <li><a href="#">Porro voluptas omnis eaque</a></li>
                                <li><a href="#">Porro voluptas omnis eaque</a></li>
                                <li><a href="#">Porro voluptas omnis eaque</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

            </aside>
        </div>
    </div>
</section>

<footer class="footer">
    <div class="container">
        Powered by <a href="http://getbootstrap.com/" target="_blank">Bootstrap</a><span class="dot"></span>Made with <i class="fa fa-heart text-danger"></i> by <a href="#" target="_blank">Jack</a>
    </div>
</footer>

<!-- Main vendor Scripts-->
<script src="scripts/jquery-1.11.3.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>

<!-- START Page Custom Script-->
<script src="vendor/rippler/rippler.min.js"></script>
<script src="vendor/slimscroll/slimscroll.min.js"></script>
<script src="vendor/swipebox/swipebox.min.js"></script>
<script src="vendor/dotdotdot/dotdotdot.min.js"></script>
<!-- END Page Custom Script-->

<!-- App Main-->
<script src="scripts/app.js"></script>
<!-- END Scripts-->

<?php wp_footer(); ?>
</body>
</html>

    он отображается но стили не подгружаются, я написал файл function.php в корне темы,

    <?php

// set up

// includes
include (get_template_directory() . '/includes/front/enqueue.php');

// action and filter hoocks
add_action('wp_enqueue_scripts', 'pb_equeue');

    так-же создал файл /includes/front/enqueue.php,

    <?php
function pb_enqueue() {
    wp_register_style('pb_bootstrap', get_template_directory_uri().'/asset/styles/bootstrap.css');

    wp_enqueue_style('pb_bootstrap');
}

    так-же существует файл /assets/styles/bootstrap.css.
    У парня на видео после этих изменений стили загрузились у меня нет. Подскажите в чем может быть проблема?

Просмотр 2 ответов — с 1 по 2 (всего 2)
  • Riskful

    (@riskful)

    8 лет, 6 месяцев назад

    в самом первом куске кода, где подключаешь файлы
    <link href="styles/bootstrap.css" rel="stylesheet">
    А так же файлы с расширением .js нужно использовать абсолютный путь примерно так
    <link href="<?php echo bloginfo('template_url'); ?>/styles/bootstrap.css" rel="stylesheet">

    SeVlad

    (@sevlad)

    8 лет, 6 месяцев назад

    <link href=»styles/bootstrap.css» rel=»stylesheet»>

    Если такое показывают в «видеокурсах» — выкиньте их подальше. И вообще забудьте про любые видеоуроки, если это не уроки макраме или танцев

    Начините с изучения html/css и после этого изучайте принципы создания тем.

Просмотр 2 ответов — с 1 по 2 (всего 2)
  • Тема «не загружаются стили» закрыта для новых ответов.

Метки