style.cssが下記の様に読み込むのが常識（？）のようなものです。
function theme_enqueue_styles(){
wp_enqueue_styles( 'parent-style', get_template_directory_uri() . '/style.css', array() );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
あと、初めてテーマを制作する際はUnderscores等のフレームワークをベースに制作したほうがスムーズに行くと思います。
返信ありがとうございます。
下記のコードも試してはいますが、こちらはheadタグ内に読み込まれすらしない状態です。
function add_style() {
wp_enqueue_style('main', get_stylesheet_uri());
}
add_action( 'wp_enqueue_scripts', 'add_style' );
Underscoresに関しては、目を通させて頂きます。
テンプレートの構造がわからないので回答のしようがありませんでした。
よってUnderscoresを勧めた次第であります。
こちらのサイトも参考になると思います。
こんにちは、
確認したいのですが、
get_header(); get_footer()`を記述しない形式のテンプレートを作っているのでしょうか？
もしそうなら、以下のようにaction hookを追加してみてください。
<?php
do_action( 'get_header' );
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<?php wp_head();?>
</head>
<body>
<p><br />content here<br /></p>
<?php
do_action( 'get_footer' );
do_action( 'wp_print_footer_scripts' );
do_action( 'wp_footer' );
?>
</body>
</html>
@rickaddison7634 様、@nobita 様
返信ありがとうございます。
情報を追加いたします。
ディレクトリ構造としては、テーマファイルの直下にindex.php、header.php、footer.php、style.cssなど最低限のものが置いてあります。
index.php、header.php、footer.phpのそれぞれのコードは以下のようになっています。
index.php
<?php get_header(); ?>
<div>original</div>
<?php get_footer(); ?>
header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<?php wp_head();?>
</head>
<body>
<div class="page">
<header>
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
</header>
footer.php
</div> <!-- class=page -->
<?php wp_footer(); ?>
</body>
</html>
えーと、functions.phpは存在しますか？
function add_style() {
wp_enqueue_style('main', get_stylesheet_uri());
}
add_action( 'wp_enqueue_scripts', 'add_style' );
や
function theme_enqueue_styles(){
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array(), false );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
等はfunctions.phpに記述するものですが・・・
あと、気になるのが２点あります。
- 使用しているテキストエディター
- それぞれのファイルの文字コード→UTF-8（BOMなし）が正解
返信ありがとうございます。
functions.phpに
function add_style() {
wp_enqueue_style('main', get_stylesheet_uri());
}
add_action( 'wp_enqueue_scripts', 'add_style' );
こちらを記述しています。
テキストエディターはsublime text 3
文字コードはすべてのファイルでUTF-8のBOM無しです。
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
WordPressはUTF-8以外の文字コードは指定不可のようなので、
charset=ISO-8859-1"の部分をcharset="utf-8"に変更してみてください。
ついでにcontent="text/html;もcontent="text/html"に修正してみると良いかもしれません。
あと、いくつかのテンプレートでは
<meta http-equiv="X-UA-Compatible" content="IE=edge">
の記述が見られました。
ありがとうございます。
該当のメタタグを以下のように修正しましたが、変わらずスタイルは反映されません。
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
スーパーリロードなども試しています。
3つの公式テーマを見比べましたが、
どれも<meta charset="utf-8">という感じで独立して書かれています。
あとは未だに表示を試していないブラウザで表示を試すとか。
開発環境には必要なものは全て揃っていますか？
XAMMPとかLocal by flywheelとかAMPPSとか全て揃っているものを使用していますか？
ありがとうございます。
metaタグを以下のように記述し直しましたが変わりません。
<meta http-equiv="Content-Type"/>
<meta content="text/html"/>
<meta charset="utf-8"/>
FireFoxとedgeでも確認しましたが、スタイルは当たっていませんでした。
ローカルの開発環境はXAMMPで、こちらは正常にスタイルが当たっています。
サーバー側はApatch、MySQL、PHPを入れています。
バージョンはそれぞれ、
Apatch:2.4.38
MySQL:5.6.43
PHP:5.6.40
となっています。
今回うまくスタイルが当たっていないのは、サーバー側の方です。
XAMMPでうまくいってサーバーで上手く行っていない・・・
- XAMMP側でちゃんと表示されるものをサーバーにアップロードしましたか？
- サーバー側のキャッシュの削除は行いましたか？（あればの話）
後はサーバーの環境や設定を見直すと良いでしょう。
apacheとmysqlの再起動を試すというのも有効かもしれません。
ありがとうございます。
ご指摘いただいた点を確認してみます。
ちなみにですが、
index.php、single.php、page.phpそれぞれにwp_head()とwp_footer()を記述するとスタイルが適用されるのですがなにか分かりますでしょうか？
index.php、single.php、page.phpそれぞれにwp_head()とwp_footer()を記述するとスタイルが適用されるのですがなにか分かりますでしょうか？
これはつまりget_header();やget_footer();が機能していないということではないでしょうか？
header.phpやfooter.phpに画面に何かを出力させるコードを追加してみてください。
ありがとうございます。
get_header()もget_footer()も機能していました。
まだ何かあるかもしれないので、確認してみます。
