Q&A
分かりやすく細かいアドバイス本当にありがとうございます。
各phpファイルを適当なフォルダで作成して、FTPソフト内のwp-contentのthemesに入れて反映させたのですが、やはりテーマ管理画面の下に
壊れているテーマ
以下のテーマはインストール済みですが、足りない部分があります。
名前 説明
img スタイルシートが見つかりません。と表示され、サイトの画像が表示されません。
imgファイルの保存場所が違うのが関係しているのでしょうか？
●前提・実現したいこと
wordpressのテーマに画像を表示させようとしています。
●発生している問題・エラーメッセージ
wordoressのテーマ管理に
「壊れているテーマ
以下のテーマはインストール済みですが、足りない部分があります。
名前 説明
img スタイルシートが見つかりません」と表示されます。
●該当のソースコード
★index.php
★style.css
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
body{
width: 1100px;
margin: 0 auto;
}
#nav-bar{
display: flex;
background-color: #f5f5f5;
}
#nav-bar li{
margin-right: 50px;
list-style-type: none;
}
#nav-bar li a{
font-size: 15px;
color: #777777;
font-weight: bold;
}
#main-body{
display: flex;
}
#main-body-left{
width: 70%;
}
.blogcard{
display: flex;
}
.posts{
padding-left: 30px;
}
#prenext{
display: flex;
justify-content: space-between;
margin: 30px;
}
footer{
background-color: #f5f5f5;
text-align: center;
}
●試したこと
FTPソフト内のテーマフォルダにimgフォルダやstyle.cssを保存しているのですが反映せず中々改善しませんでした。
テーマ管理を確認すると「img スタイルシートが見つかりません。」と記載されています。
お手数ですが解決策や対応策があれば教えてください。
ご検討宜しくお願い致します。
回答5件
0
自作テーマですか？
- テーマの構造は正しいですか？
- style.css にヘッダは記載されていますか？
■テーマの構造
テーマは、 /wp-content/themes/ に テーマのディレクトリを作成して、その中に テーマのファイルを作成します。
my-theme という名前にするのであれば、
/wp-content/themes/my-theme/ ディレクトリを作成して、中に
style.css , funtions.php , index.php
等のファイルやテーマで使用する JavaScript や 画像ファイルを配置します。
■ style.css に「テーマ詳細」の記述はあるか？
質問の
★style.css
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
の内容では不十分です。
テーマの作成 の「テーマスタイルシート」に
style.css は、テーマの「CSS スタイル」情報に加えて、コメントの形式で必ず「テーマ詳細」を記述する必要があります。
と記載されているように下記のような テーマについての情報を記載したヘッダが必要になります。
上記 URL に記載されている WordPress 標準テンプレート Twenty Thirteen の場合は下記のような内容です。
/* Theme Name: Twenty Thirteen Theme URI: http://wordpress.org/themes/twentythirteen Author: the WordPress team Author URI: http://wordpress.org/ Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready Text Domain: twentythirteen This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */
最低限必要なのは、Theme Name: なので style.css の先頭に
/* Theme Name: テーマ名 */
の記載があれば、テーマの style.css ファイルと認識されると思います。
投稿2021/04/02 14:08
編集2021/04/02 14:14
総合スコア25171
0
自己解決
ブラウザ機能でHTMLコードではcoffee-02.jpgになっていました。
なのでindex.phpもcoffee-02.jpに書き直したら画像が反映されました
投稿2021/04/03 14:42
総合スコア15
0
スクリーンショットの添付の方法です。
質問文を編集しようとすると、以下のような写真マークがあると思います。
それをクリックすると画像ファイルが添付できるようです！
記載されていたコードをベースにテーマを用意してみました。
自分のところ(wordpress5.7)だと、「壊れているテーマ
以下のテーマはインストール済みですが、足りない部分があります。」は
表示されていないように見えます。
以下のファイルをwp-content/themes/適当なフォルダ/
においてみては如何でしょうか？
index.php
php
1<?php get_header(); ?> 2<!--header end--> 3 4<div id="main-body"> 5<div id="main-body-left"> 6 7<?php 8if(have_posts()) : 9while(have_posts()) : 10the_post(); 11?> 12 13<div class="blogcard"> 14<?php if(has_post_thumbnail()) : ?> 15<?php the_post_thumbnail('thumbnail'); ?> 16<?php else : ?> 17<img src="<?php echo get_template_directory_uri(); ?>/img/coffee-01.jpg" width="150" height="150"> 18<?php endif; ?> 19<div class="posts"> 20<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 21<div class="info"><?php echo get_the_date(); ?> [<?php the_category(','); ?>] </div> 22<p><?php the_excerpt(); ?></p> 23</div> 24</div> 25 26<?php 27endwhile; 28else: ?> 29<p>記事はありません</p> 30<?php endif; ?> 31 32<div id="prenext"> 33<div class="pre"><?php previous_posts_link(); ?></div> 34<div class="next"><?php next_posts_link(); ?></div> 35</div> 36 37</div> 38<!--left end--> 39<?php get_sidebar(); ?> 40 41<!--sidebar end--> 42</div> 43 44<?php get_footer(); ?> 45<!--footer end-->
404.php
php
1<?php get_header(); ?> 2There isnot article.ff 3 4<?php get_footer(); ?> 5
category.php
php
1<?php get_header(); ?> 2gategory 3<?php get_footer(); ?> 4 5
footer.php
php
1 <footer> 2 </footer> 3 <?php wp_footer(); ?> 4 </body> 5</html>
functions.php
php
1<?php 2 3?> 4
header.php
php
1<!DOCTYPE html> 2 3<html lang="ja"> 4<head> 5<meta charset="UTF-8"> 6<meta content="width=decive-width, initial-scale=1.0" name="viewport"/> 7<title><?php bloginfo('name'); ?></title> 8<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>"> 9<?php wp_head(); ?> 10</head> 11<body> 12<header> 13<h1 id="head-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name'); ?></a></h1> 14<?php wp_nav_menu(); ?> 15</header>
index.php
php
1<?php get_header(); ?> 2<!--header end--> 3 4<div id="main-body"> 5<div id="main-body-left"> 6 7<?php 8if(have_posts()) : 9while(have_posts()) : 10the_post(); 11?> 12 13<div class="blogcard"> 14<?php if(has_post_thumbnail()) : ?> 15<?php the_post_thumbnail('thumbnail'); ?> 16<?php else : ?> 17<img src="<?php echo get_template_directory_uri(); ?>/img/coffee-01.jpg" width="150" height="150"> 18<?php endif; ?> 19<div class="posts"> 20<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 21<div class="info"><?php echo get_the_date(); ?> [<?php the_category(','); ?>] </div> 22<p><?php the_excerpt(); ?></p> 23</div> 24</div> 25 26<?php 27endwhile; 28else: ?> 29<p>記事はありません</p> 30<?php endif; ?> 31 32<div id="prenext"> 33<div class="pre"><?php previous_posts_link(); ?></div> 34<div class="next"><?php next_posts_link(); ?></div> 35</div> 36 37</div> 38<!--left end--> 39<?php get_sidebar(); ?> 40 41<!--sidebar end--> 42</div> 43 44<?php get_footer(); ?> 45<!--footer end-->
page.php
php
1<?php get_header(); ?> 2<?php if (have_posts()): 3 while (have_posts()): 4 the_post(); 5 the_content(); 6 endwhile; 7 endif; ?> 8<?php get_footer(); ?> 9
single.php
php
1<?php get_header(); ?> 2<?php previous_post_link(); ?> 3<?php next_post_link(); ?> 4<?php get_footer(); ?> 5
style.css
php
1/* 2html5doctor.com Reset Stylesheet 3v1.6.1 4Last Updated: 2010-09-17 5Author: Richard Clark - http://richclarkdesign.com 6Twitter: @rich_clark 7*/ 8 9body{ 10 width: 1100px; 11 margin: 0 auto; 12 } 13 14 nav-bar{ 15 display: flex; 16 background-color: #f5f5f5; 17 } 18 19 nav-bar li{ 20 margin-right: 50px; 21 list-style-type: none; 22 } 23 24 nav-bar li a{ 25 font-size: 15px; 26 color: #777777; 27 font-weight: bold; 28 } 29 30 main-body{ 31 display: flex; 32 } 33 34 main-body-left{ 35 width: 70%; 36 } 37 38 .blogcard{ 39 display: flex; 40 } 41 42 .posts{ 43 padding-left: 30px; 44 } 45 46 prenext{ 47 display: flex; 48 justify-content: space-between; 49 margin: 30px; 50 } 51 52 footer{ 53 background-color: #f5f5f5; 54 text-align: center; 55 }
投稿2021/04/02 14:30
編集2021/04/03 05:10
退会済みユーザー
総合スコア0
0
WordPressでテーマが保存されているディレクトリは、こちらです。
wp-content/themes
WordPressがインストールされているディレクトリの中に、wp-contentというフォルダがあります。
このフォルダの中に、themesというフォルダがあります。
このthemesのフォルダの中に、テーマ毎にフォルが作られています。
テーマは、WordPressの管理画面で、外観のテーマを選択してください。
新規追加で、追加できます。
どこかのウェブサイトで見つけてダウンロードしたテーマの場合は、FTPなどで、上記のフォルダにアップロードしてください。
なお、Zip形式で圧縮されている場合は、解凍してからアップロードしてください。
通常は、WordPressの管理画面の外観の中のテーマで、新規追加で良いです。
この新規追加で、使いたいテーマを探してインストールする流れになります。
投稿2021/04/02 13:52
総合スコア80
テーマを切り替えて一度自分が作ったテーマは削除してもう一度自分が作ったテーマをアップロードしたいのですが、自分のテーマに対して右クリックで名前を付けて保存してファイルを開いてもテーマが見当たりませんでした。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/04/02 14:34
2021/04/03 00:22
2021/04/03 03:16
2021/04/03 04:07
2021/04/03 12:08