質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

パス

パス(path)はファイルシステムの場所(階層)を明示したものです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

2回答

1868閲覧

Wordpressでstyle.cssが反映されない

TakumaTakahashi

総合スコア13

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

パス

パス(path)はファイルシステムの場所(階層)を明示したものです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2020/09/04 02:00

以下の6種類のコードをwordpressにアップロードし、自作テーマを作ろうと考えています。
実際にアップロードしてみると、テキストは表示されるのですが、cssが読み込まれないという現象が起きています。

Chromeの検証を行なったところ、css自体は表示されているので、どちらかというとwordpress側できちんと反映されていないのではないかと考えています。

index.php
style.css
head.php
header.php
footer.php
function.php

wordpress初心者なもので、色々と検索してみて、wordpressに必要なコードは諸々入れたつもりではありますが不十分な点や不適切な点があるかもしれません。
アップロード方法としては、【外観】→【テーマ】→【アップロード】という手順でzipファイルからアップロードしています。
上記のデータを圧縮しているので、head.phpに入れているcssへのパスも

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css"> という形で書いています。

それぞれのコードを記載するので、お手間をおかけしますが、どこをどのように改善すれば良いかご教示いただけますと幸いです。


index.php

<html lang="en-US"> <head> <? echo file_get_contents ( "<?php echo get_template_directory_uri(); ?>/../templates/head.html" ); ?> <title>Title</title> <? php wp_head(); ?> </head> <!--compile it with javascript--> <body> <? echo file_get_contents ( "<?php echo get_template_directory_uri(); ?>/../templates/header.html" ); ?> <article> <section class="section1"> <h2>会社を<br>デザインする</h2> <p> SNS運用 / Web広告 / プロモーション動画撮影 / 商品動画撮影 / 写真撮影 / ブランディング / オウンドメディア / </p> <div class="side-msg"> <span>動画マーケティング</span> <span>dopehouse.io</span> </div> </section> </article> <? echo file_get_contents ( "<?php echo get_template_directory_uri(); ?>/../templates/footer.html" ); ?> <? php wp_footer(); ?> </body>

style.css

/* Theme Name: DOPE HOUSE Theme URI: http://dopehouse.io Description: DOPE HOUSEのテーマです。 Version: 1.0 Author: dopehouse Author URI: http://dopehouse.io */ body{ font-size:16px; background-color:#fcfcfc; maーーー以下省略ーーーーーー

head.php

$body = <<<HTML <script> <meta charset="utf-8"> <!----> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css"> </script> HTML;

header.php

<script> <header class="fixed"> <h1 class="pagetitle"> <a href="main"> <span>Dope House</span><br> <span>dopehouse.io</span> </a> </h1> </header> <div class="header-logo"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Octicons-mark-github.svg/1024px-Octicons-mark-github.svg.png" alt="logo"> </div> <</script> HTMML;

foooter.php

$body = <<<HTML <script> <aside class="index"> <section> <h2> <span>CONTENTS</span> </h2> </footer> <div class="pageup"></div> <script src="../js/htmlgen.js"></script> <script src="../js/bezierX.js"></script> <script src="../js/nav.js"></script> <script src="../js/fade-in.js"></script> <script src="../js/a.js"></script> <script src="../js/accessories.js"></script> <script src="../carousel/Elem.js"></script> <script src="../carousel/bezierX.js"></script> <script src="../carousel/animation.js"></script> <script src="../carousel/carousel.js"></script> <!--script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script--> <script> var cels = document.querySelectorAll(".carousel"); for(var i = 0; i < cels.length; i++){ var carousel = new Carousel(cels[i]); } /* $(document).ready(function(){ $('html,body').animate({ scrollTop: 0 }, '1'); });*/ window.scrollTo(0,0); window.addEventListener("load",()=>{ window.scrollTo(0,0); }); </script> </script> HTML;

function.phpには何も記載していません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/09/04 02:43 編集

何を参考に作ったのでしょう。 色々とおかしいと思います。パーツをfile_get_contents()ですることって今もうないんじゃないかと・・
guest

回答2

0

ヒアドキュメントのなかにPHPのコード書いても実行されんでしょうね

PHPの実行結果の出力を文字列に格納したいなら出力バッファで

php

1ob_start(); 2?> 3<script> 4<meta charset="utf-8"> 5<!----> 6<meta name="viewport" content="width=device-width, initial-scale=1"> 7<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css"> 8</script> 9<?php 10$body=ob_get_clean();

そもそも、出力の検索置換をしてるわけでもなさそうなのに
なんのために文字列に格納してるんでしょうか、無駄に思います

その他なんか色々やり方がよろしくない気がします

  1. テーマはテーマのフォルダで完結すべきです、外のファイルに依存すべきじゃありません
  2. WordPressのテーマならファイルの読み込みはget_template_partを基本に

投稿2020/09/04 03:47

KazuhiroHatano

総合スコア7819

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

このような記述でどうでしょう?
urlをエスケープしていないのが原因かと思います。

<link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/style.css">

投稿2020/09/04 02:15

ug_o

総合スコア39

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問