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

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

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

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

PHP

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

受付中

Wordpress のテーマが表示されません

Kelvin
Kelvin

総合スコア0

WordPress

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

PHP

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0回答

0評価

0クリップ

1343閲覧

投稿2016/09/01 04:06

初心者につき少し丸投げになってしまうかもしれませんが、ご容赦ください。

Wordpressのテーマを作りMAMPで作った環境でテストしようと思ったのですが、テーマが全く表示されません。

テーマの一覧のところには表示されるのですが、”ライブプレビュー”をクリックすると左側に”保存して有効化”等は表示されるのですが、右側のプレビューのところには何も表示されません。

デフォルトのテーマやこれまで作ったテーマは普通に表示されます。

そこで、お願いなのですが、ソースを見てどこが悪いのか教えていただけないでしょうか?

PHP

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="http://yui\.yahooapis\.com/3\.18\.1/build/cssreset/cssreset-min\.css"> <link rel="stylesheet" type="text/css" href="style\.css"> <title>Title</title> </head> <body> <div id="header"> <h1 id="title"><a href="">Title</a></h1> <ul id="top-menu"> <a href=""><li>Home</li></a> <a href=""><li>Profile</li></a> <a href=""><li>About us</li></a> <a href=""><li>Contact</li></a> </ul> </div><!-- #header --> <div id="container"> <div id="main"> <div class="post"> <h2><a href="">あいうえおかきくけこさしすせそたちつてとなにぬねの</a></h2> <ul class="navi"> <li><a href="">一番目</a></li> <li><a href="">一番目</a></li> <li><a href="">一番目</a></li> </ul> <p>あいうえおあいうえお</p> <div class="h-large">大見出し</div> <strong>あいうえお</strong> <div class="h-small">小見出し</div> <b>ふとじふとじ</b> <code> #include "studio\.h" int main\(\){ } </code> <aside>ほそくほそく</aside> <p>さようなら</p> <div id="post-navi"> <a href=""><div class="prev">prev</div></a> <a href=""><div class="next">next</div></a> </div> </div><!-- \.post --> </div><!-- #main --> <div id="side"> <div class="widget"> <h3>Side</h3> <p>サイドサイドサイド</p> </div> </div> </div><!-- #container --> <div id="footer"> &copy;2016,Kelvin\. </div><!-- #footer --> </body> </html>

これがindex.phpで、

CSS

/\* Theme Name: name Theme URI: Author: Author URI: Description: Version: 1\.0 \*/ /\* - 使い方 - ナビゲーション: <ul class="navi"> 投稿: <div class="post"> -タイトル: <h2> 大見出し: <div class="h-large"> 小見出し: <div class="h-small"> 蛍光ペン: <strong> 太字: <b> 補足: <aside> ソース: <code> ウィジェット: <div class="widget"> - タイトル: <h3> \*/ @charset "UTF-8"; a{ color: #005aff; text-decoration: none; } a:hover{ text-decoration: underline; } p{ color: #333; font-size: 16px; line-height: 1\.8em; margin: 30px 0; } strong{ background-color: #ff0; } b{ font-weight: bold; } aside{ font-size: 14px; color: #888; } code{ display: inline-block; color: #f1f1f1; background-color: #252525; padding: 8px; border-radius: 4px; margin: 30px 0; font-size: 16px; font-family: メイリオ,Arial, Helvetica, sans-serif; } img{ width: 640px; height: auto; } html{ font-family: メイリオ,Arial, Helvetica, sans-serif; } body{ } #header{ margin-bottom: 50px; } h1{ text-align: center; } h1 a{ color: #ffa500; text-decoration: none; font-family: Impact; font-size: 64px; } h1 a:hover{ text-decoration: none; } #top-menu{ font-size: 24px; } #top-menu li{ float: left; border-bottom: 8px solid #ccc; width: 25%; text-align: center; padding: 4px 0; } #top-menu li:hover{ border-bottom: 8px solid #005aff; } #container{ width: 1024px; margin: 0 auto; clear: both; } #main{ float: left; width: 700px; } \.post{ padding: 0 30px; border-bottom: 1px solid #ccc; margin-bottom: 40px; } \.navi{ width: 100%; border: 1px solid #ccc; } \.navi a:hover{ color: #ffa500; } h2,h3{ text-align: center; color: #333; } h2{ font-size: 25px; font-weight: bold; margin: 10px 0; border-bottom: 4px solid #333; padding: 5px 0; } h2 a{ color: #333; } h2 a:hover{ text-decoration: none; } h3{ font-size: 24px; margin: 15px 0; border-left: 8px solid #ffa500; border-right: 8px solid #ffa500; } \.h-large{ font-size: 24px; font-weight: bold; border-bottom: 4px solid #ffa500; padding: 0 10px; margin: 20px 0; color: #333; } \.h-small{ font-size: 22px; font-weight: bold; padding: 0 10px; margin: 10px 0; color: #333; } #post-navi{ overflow: hidden; margin-bottom: 8px; } \.prev,\.next{ background-color: #f1f1f1; padding: 4px; border-radius: 4px; } \.prev{ float: left; width: 300px; } #post-navi a:hover{ color: #ffa500; } \.next{ float: right; width: 300px; } #side{ float: right; width: 300px; } \.widget{ margin-bottom: 10px; } \.widget p,li{ padding: 0 32px; } #footer{ text-align: center; border-top: 1px solid #ccc; color: #ccc; clear: both; } /\* Tablet \*/ @media all and \(max-width:1023px\){ #container{ width: 768px; } #main{ float: left; width: 500px; } #side{ float: right; width: 250px; } \.prev,\.next{ width: 200px; } } /\* Smart Phone \*/ @media all and \(max-width:767px\){ #main,#side{ float: none; width: 320px; } #top-menu{ font-size: 18px; } \.prev,\.next{ width: 120px; } }

これが、style.cssです。(テーマのURLなどはちゃんと書いていますが、質問の際消させていただきました。)

ドットインストールによればこの時点でスタイルは当たらないが、HTMLは表示されるということでしたが、表示されませんでした。

ほんとに困っております。

どうか、お知恵をお貸しください。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

WordPress

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

PHP

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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