以下の6種類のコードをwordpressにアップロードし、自作テーマを作ろうと考えています。
実際にアップロードしてみると、テキストは表示されるのですが、cssが読み込まれないという現象が起きています。
Chromeの検証を行なったところ、css自体は表示されているので、どちらかというとwordpress側できちんと反映されていないのではないかと考えています。
index.php
style.css
head.php
header.php
footer.php
function.php
wordpress初心者なもので、色々と検索してみて、wordpressに必要なコードは諸々入れたつもりではありますが不十分な点や不適切な点があるかもしれません。
アップロード方法としては、【外観】→【テーマ】→【アップロード】という手順でzipファイルからアップロードしています。
上記のデータを圧縮しているので、head.phpに入れている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には何も記載していません。