web-dev-qa-db-ja.com

HTMLテンプレートをWordpressテーマに変換する

静的HTMLページをWordpressテーマに変換しようとしていたときに、問題がありました。ページが正しく動作しないGoogle Chromeコンソールをチェックした後、間違ったパスでCSSファイルをロードしてしまう

website/css/styles.cssとWebsite/css/style-desktop.cssをロードします。

以下はheader.phpからスタイルシートをインポートした方法です。

<link rel="stylesheet" href="<?php bloginfo( 'template_directory' ); ?>/css/skel.css" />
<link rel="stylesheet" href="<?php bloginfo( 'template_directory' ); ?>/css/style.css" />
<link rel="stylesheet" href="<?php bloginfo( 'template_directory' ); ?>/css/style-desktop.css" />
<link rel="stylesheet" href="<?php bloginfo( 'template_directory' ); ?>/css/style-noscript.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="<?php bloginfo( 'template_directory' ); ?>/css/ie/v8.css" /><![endif]-->
<!--[if lte IE 8]><script src="<?php bloginfo( 'template_directory' ); ?>/css/ie/html5shiv.js"></script><![endif]-->
<script src="<?php bloginfo( 'template_directory' ); ?>/js/jquery.min.js"></script>
<script src="<?php bloginfo( 'template_directory' ); ?>/js/skel.min.js"></script>
<script src="<?php bloginfo( 'template_directory' ); ?>/js/init.js"></script>

それはwebsite.com/wp-content/theme/themename/css/styles.cssとしてスタイルシートを得るべきです

私はfunction.phpに書くべき何かがあるかどうかわからない

UPDATE1：

JSファイルの1つがCSSファイルを直接読み込むので、CSSファイルのパスを変更する必要がありました。

CSSでは問題ないように見えますが、テーマにはいくつかの矛盾があります。

phpfunctionstheme-developmentcustomizationhtml
1
Kalmuraee

言ったように、あなたはあなたのテーマのfunctions.phpにこのようなスタイルシートをエンキューするべきです：

function adds_to_the_head() { // Our own unique function called adds_to_the_head

wp_register_style( 'custom-style-css', get_stylesheet_directory_uri() . '/css/styles.css','','', 'screen' ); // Register style.css

wp_enqueue_style( 'custom-style-css' ); // Enqueue our stylesheet

}
add_action( 'wp_enqueue_scripts', 'adds_to_the_head' );
1
user3325126

こんな感じ

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

しかし、あなたのスクリプトをfunction.php に登録することをお勧めします。関数リファレンス/ wp enqueue script

0
shuvroMithun

あなたはこのように使うことができます。そしてそれはまた標準的です

/**
 * Enqueue scripts and styles.
 */
function test_name_scripts() {
    wp_enqueue_style( 'test-name-style', get_stylesheet_uri() );

    wp_enqueue_script( 'test-name-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );

    wp_enqueue_script( 'test-name-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'test_name_scripts' );

そしてまた、このチュートリアルに従ってください： https://developer.wordpress.org/themes/basics/including-css-javascript/

0
Abdus Salam