如何修正WordPress主题中的图像和CSS文件路径

1 年 ago

文, 翔

1 minute

首先

・WordPress初学者的朋友
・在WordPress主题中，图片和CSS没有成功显示的朋友

为什么主题无法反映图像和CSS。

将主题文件放置在WordPress目录的“wp-content/themes/~”下，这会导致图片和CSS文件的路径失效，无法反映出来。需要注意的是，即使使用相对路径也无法反映出来。

以下是画像和CSS文件的路径以及被WordPress识别的路径的详细信息。

画像、CSSのパスWordPressで認識されるパスwp-content/themes/自作テーマ/images/画像.jpgwordpress/images/画像.jpgwp-content/themes/自作テーマ/css/style.csswordpress/style.css

修改主题图片和CSS文件路径

要在 WordPress 中描述被识别为路径, 可以使用 WordPress 内置函数 get_template_directory_uri()。

get_template_directory_uri()会返回正在使用的主题目录的URL。它不需要任何参数。它只在激活的模板上有效，并且注意不能在末尾添加斜杠”/”。

关于WordPress的“style.css”文件

在使用WordPress的主题时，请务必创建一个style.css文件。同时，在编写style.css时，一定要确保写入主题的名称。

请参考下面的内容。

/*
Theme Name : ここにテーマの名前
*/

/*
ここに、CSSを記述
*/

接下来，我们将编写一个简单主题的示例代码来实际操作。

样本代码

※画像のファイルパス
wp-content/themes/qiita_wp01/images/wordpress.jpg

※CSSのファイルパス
wp-content/themes/qiita_wp01/style.css

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WordPressパスの修正</title>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
</head>
<body>
    <h1>WordPress</h1>
    <img src="<?php echo get_template_directory_uri(); ?>/images/wordpress.jpg">
</body>
</html>

/*
Theme Name : WordPress
*/

h1 {
    color: blue;
    text-align: center;
}

img {
    width: 100%;
}

总结

在WordPress中要修正图片和CSS文件的路径，可以使用get_template_directory_uri()。

在创建主题时，务必创建style.css文件。

在style.css文件中，必须要写下主题的名称。