Wordpress: url resources returns 404

StackOverflow https://stackoverflow.com/questions/22381519

Question

I have a problem with the resource urls in wordpress.

in the index page, my css resources, js and images are properly called:

wp-content/themes/focus-template/js/lib/jquery.min.js

but on the post detail page, the name of the post is added to urls:

myDomain.com/projet-2012/wp-content/themes/focus-template/js/lib/jquery.mixitup.min.js 404 (Not Found)

I think my virtualhost is misconfigured but I can not find where does the problem..

<VirtualHost *:80>
ServerName local.afric-edu.com
DocumentRoot /var/www/afric-edu/
ErrorLog /var/log/apache2/errors.log
 <Directory "/var/www/afric-edu">
    AddDefaultCharset UTF-8

DirectoryIndex index.php index.html
RewriteEngine On
RewriteBase /
AddType image/gif .gif
AddType image/ief .ief
AddType image/jpeg .jpeg .jpg .jpe
AddType image/png .png

  RewriteRule ^index\.php$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_URI} !^.*\.(jpe?g|png|gif|css|js)$ [NC]
  RewriteRule . /index.php [L]
  Order allow,deny
  Allow from all
  AllowOverride All
  </Directory>
</VirtualHost>

EDIT:

Call of resources have been made in this way:

<head>
    <meta charset="utf-8">
    <meta name="robots" content="index, nofollow">
    <meta name="description" content="Your website description here">
    <meta name="keywords" content="your, website, keywords, here">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="viewport" content="width=device-width">

    <link rel="shortcut icon" href="../images/favicon/favicon.ico">

    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <script type="text/javascript" src="wp-content/themes/focus-template/js/lib/jquery.min.js"></script>
    <script type="text/javascript" src="wp-content/themes/focus-template/js/lib/modernizr.js"></script>
    <script type="text/javascript" src="wp-content/themes/focus-template/js/lib/pace.js"></script>
    <script type="text/javascript" src="wp-content/themes/focus-template/js/lib/classie.js"></script>
    <script type="text/javascript" src="wp-content/themes/focus-template/js/lib/jquery.fittext.js"></script>
    <script type="text/javascript" src="wp-content/themes/focus-template/js/lib/jquery.magnific-popup.min.js"></script>
    <script type="text/javascript" src="wp-content/themes/focus-template/js/lib/jquery.mixitup.min.js"></script>
    <script type="text/javascript" src="wp-content/themes/focus-template/js/lib/jquery.sudoslider.min.js"></script>
    <script type="text/javascript" src="wp-content/themes/focus-template/js/lib/jquery.superslides.min.js"></script>
    <script type="text/javascript" src="wp-content/themes/focus-template/js/lib/smoothscroll.js"></script>



    <link rel="stylesheet" href="wp-content/themes/focus-template/css/lib/font-awesome.min.css">
    <link rel="stylesheet" href="wp-content/themes/focus-template/css/lib/magnific-popup.css">
    <link rel="stylesheet" href="wp-content/themes/focus-template/css/lib/lite.css">
    <link rel="stylesheet" href="wp-content/themes/focus-template/css/style.css">
    <link rel="stylesheet" href="wp-content/themes/focus-template/css/colors/yellow.css">
    <link rel="stylesheet" href="wp-content/themes/focus-template/genericons/genericons.css">



    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <?php wp_head(); ?>
</head>

Do you know hot to fix that ?

Thanks for your help :)

Was it helpful?

Solution

You shouldn't link to resources like that rather use something like:

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/lib/jquery.min.js"></script>

You can check the function at the codex here

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top