具有自己主题的文件的路径[Wordpress]

Question

I designed a website for a client, out of WordPress. But I want the design to work with WordPress because on the website they should be able to publish news. I will get the news with the functions of WordPress. I have the theme running, but I have a problem with the links of the menus, css, js, etc. I want to know where to configure so that the routes are correct.

The web structure contains the css, img, js, template, index.php, style.php folders.

I have a default-head.php file and scripts.php in the template folder that contains this.

default-head.php

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Cache-Control" content="no-cache">
<link rel="stylesheet" href="css/sidr.light.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/bootstrap-overwrite.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png"/>

scripts.php

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/functions.js"></script>
<script src="js/sidr.min.js"></script>
<script src="js/bootbox.min.js"></script>

These files are included in the index. The code of my menu is.

<div class="container-fluid">
        <div class="row">
            <div id="header" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="navbar navbar-inverse navbar-static-top" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                          </button>
                          <a id="logo" href="/"></a>
                        </div>

                        <div class="navbar-collapse collapse">
                          <ul class="nav navbar-nav">
                            <li><a href="/" class="first"><span class="fa fa-home"></span>Inicio</a></li>
                            <li><a href="noticias.php"><span class="fa fa-newspaper-o"></span>Noticias</a></li>
                            <li><a href="eventos.php"><span class="fa fa-calendar"></span>Eventos</a></li>
                            <li><a href="acerca.php"><span class="fa fa-info"></span>Acerca</a></li>
                            <li><a href="contacto.php"><span class="fa fa-phone"></span>Contacto</a></li>
                          </ul>

                          <!-- <ul class="nav navbar-nav navbar-right">
                             <li class="dropdown">
                                <li><a href="#"><span class=""></span>Asociarme</a></li>
                            </li>
                          </ul> -->

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

Thanks in advance.

I will be careful.

Regards

Answer 1

Have a look at https://developer.wordpress.org/reference/functions/wp_enqueue_style/

Example

wp_enqueue_script('oxfam_js_cookie', 'https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.0/js.cookie.min.js', array(), null, true);

will add

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.0/js.cookie.min.js'></script>

Or a Basic Method

You can just use this in your PHP files for basic linking

<img src="<?php echo get_template_directory_uri(); ?>/images/image.jpg"/>

Additional answer

Custom Modifications

<!-- CSS
    ========== 
<link href="<?php //bloginfo('template_directory'); ?>/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="<?php //bloginfo('template_directory'); ?>/fonts/fontstyles.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="<?php //bloginfo( 'stylesheet_url' ); ?>" media="all">-->
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!-- Favicons
    ========== -->
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
<link rel="apple-touch-icon" href="<?php bloginfo('template_directory'); ?>/media/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="<?php bloginfo('template_directory'); ?>/media/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="<?php bloginfo('template_directory'); ?>/media/images/apple-touch-icon-114x114.png">