Проблема с стили css а также img на шаблоне Вордпресс?

Question

[Muhammadsaiid Ibrohimov]

вот изображение: https://habrastorage.org/webt/62/21/a9/6221a97d551...
Я создал свой шаблон для Вордпресса. Шаблон работает, но проблема в том что все изображении не отображаются а также css файлы. То есть php не читает css и img
Я таким образом подключил файлы css и img

<link rel="stylesheet" href="css/bootstrap.min.css"
     <link rel="stylesheet" href="css/style.css">
                                       <a href="#"><img src="img/facebook.png" alt=""></a>
                                       <a href="#" class="p-2"><img src="img/instagram.png" alt=""></a>

Конкретный путь указиваю но как буд-то php не видит . Помогите пожалуйста !

Comments

[Владимир Брумер]

Вы не верно подключаете стили и уж тем более

Вы указали относительные пути

Откройте любую тему и посмотрите как пример.

functions.php темы twentytwentyone

...

/**
 * Enqueue scripts and styles.
 *
 * @since Twenty Twenty-One 1.0
 *
 * @return void
 */
function twenty_twenty_one_scripts() {
	// Note, the is_IE global variable is defined by WordPress and is used
	// to detect if the current browser is internet explorer.
	global $is_IE, $wp_scripts;
	if ( $is_IE ) {
		// If IE 11 or below, use a flattened stylesheet with static values replacing CSS Variables.
		wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/assets/css/ie.css', array(), wp_get_theme()->get( 'Version' ) );
	} else {
		// If not IE, use the standard stylesheet.
		wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
	}

	// RTL styles.
	wp_style_add_data( 'twenty-twenty-one-style', 'rtl', 'replace' );

	// Print styles.
	wp_enqueue_style( 'twenty-twenty-one-print-style', get_template_directory_uri() . '/assets/css/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' );

	// Threaded comment reply styles.
	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}

	// Register the IE11 polyfill file.
	wp_register_script(
		'twenty-twenty-one-ie11-polyfills-asset',
		get_template_directory_uri() . '/assets/js/polyfills.js',
		array(),
		wp_get_theme()->get( 'Version' ),
		true
	);

	// Register the IE11 polyfill loader.
	wp_register_script(
		'twenty-twenty-one-ie11-polyfills',
		null,
		array(),
		wp_get_theme()->get( 'Version' ),
		true
	);
	wp_add_inline_script(
		'twenty-twenty-one-ie11-polyfills',
		wp_get_script_polyfill(
			$wp_scripts,
			array(
				'Element.prototype.matches && Element.prototype.closest && window.NodeList && NodeList.prototype.forEach' => 'twenty-twenty-one-ie11-polyfills-asset',
			)
		)
	);

	// Main navigation scripts.
	if ( has_nav_menu( 'primary' ) ) {
		wp_enqueue_script(
			'twenty-twenty-one-primary-navigation-script',
			get_template_directory_uri() . '/assets/js/primary-navigation.js',
			array( 'twenty-twenty-one-ie11-polyfills' ),
			wp_get_theme()->get( 'Version' ),
			true
		);
	}

	// Responsive embeds script.
	wp_enqueue_script(
		'twenty-twenty-one-responsive-embeds-script',
		get_template_directory_uri() . '/assets/js/responsive-embeds.js',
		array( 'twenty-twenty-one-ie11-polyfills' ),
		wp_get_theme()->get( 'Version' ),
		true
	);
}
add_action( 'wp_enqueue_scripts', 'twenty_twenty_one_scripts' );

...

Если какая-либо функция не ясна, просто загуглите. Информации об этом просто море...

аналогично и с изображениями и остальным... такие пути допустимы в css файлах

аля style.css в корне папки с темой + в корне папка images

...

p,li{cursor:url('images/text.cur'),text;}

...

Пример с изображением

<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/screenshot.png">

где screenshot.png - изображение, которое лежит в корневой папке, по идеи, ЛЮБОЙ темы WordPress

Answer 1

[Артем Золин]

Стили нужно подключать с помощью функции wp_enqueue_style()

add_action( 'wp_enqueue_scripts', 'wpz_scripts' );
function wpz_scripts() {

	// Bootstrap стили
	wp_enqueue_style( 'bootstrap-styles', get_theme_file_uri( 'css/bootstrap.min.css' ) , array(), filemtime( get_theme_file_path( '/css/bootstrap.min.css' ) ) );

	// Основные стили
	wp_enqueue_style( 'common-styles', get_theme_file_uri( 'css/style.min.css' ) , array( 'bootstrap-styles' ), filemtime( get_theme_file_path( '/css/style.min.css' ) ) );

}

Пути до файлов в теме можно получить с помощью функции get_template_directory_uri()

<a href="#"><img src="<?php echo get_template_directory_uri(); ?>/img/facebook.png" alt=""></a>
<a href="#" class="p-2"><img src="<?php echo get_template_directory_uri(); ?>/img/instagram.png" alt=""></a>

Answer 2

[Kvason]

Надо подключать в functions.php абсолютные пути к стилям. Почитайте документацию