• 解決済 rockfun

    (@rockfun)


    1.WordPressでオリジナルテーマをインクルードで作成しましたが、
    レイアウトが崩れてしまうのはどうしてでしょうか?
    ファイル分割前の状態だとだとまったくくずれません。ファイル分割したら崩れてしまいます。
    header.phpは複数の 入れ子がないためか、正常に表示されます。
    footer.phpを作る場合container終了のタグも含めてやるんでしょうか?

    <hr class=”clear” /></div> //content終了のcontent終了タグもどのファイルに含めてやればいいかわかりません。
    コメントアウトの書き方ひどいとこありますが、はしょっています。

    <div id=”header”></div>
    </div>
    <div id=”container”>
    <div id=”page”>
    <div id=”content”>
    <div id=”main”>3カラムの真ん中開始
    </div>3カラムの真ん中終了
    <div id=”leftbar”> //左サイドバー開始
    </div> leftbar終了
    <hr class=”clear” /></div> //content終了
    <div id=”rightbar”>
    </div> //rightbar終了
    </div> //page終了
    <div id=”footer”></div> //フッター終了
    </div> content //container終了

    __________________
    2.オリジナルテーマを作成してから、プレビューするとウィジェットがあります。消そうと思い、functions.phpとsidebarにphpを記述後、ダッシュボードにウィジェットが追加されましたが、現在使っているウィジェットの場所になにもありませんでした。
    ですが、デフォルトで下記のウィジェットがあります。どうすれば全部消せるでしょうか?
    検索
    固定ページ
    サンプルページ
    アーカイブ
    2013年6月
    カテゴリー
    未分類(1)
    メタ情報
    サイト管理
    ログアウト
    XHTML 準拠
    XFN
    Word Press

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • こんにちは

    閉じタグの数が多すぎませんか?2行目、3行目ダブっていませんか?

    <div id="header">
    </div>
    </div>
    <div id="container">
    	<div id="page">
    		<div id="content">
    			<div id="main">3カラムの真ん中開始</div>
    			3カラムの真ん中終了
    			<div id="leftbar">//左サイドバー開始</div>
    			leftbar終了
    			<hr class="clear" />
    		</div>
    		//content終了
    		<div id="rightbar">
    		</div>
    		//rightbar終了
    	</div>
    	//page終了
    	<div id="footer">
    	</div>
    	//フッター終了
    </div>
    content //container終了

    idが多用されていますが、classをうまく使うと、いいと思います

    トピック投稿者 rockfun

    (@rockfun)

    ありがとうございます。どうしてレイアウトが崩れてしまうんでしょうか?
    クラスをどのようなところに使えばいいですか?
    あと、ウィジェットについても答えていただけると幸いです。

    htmlが、キチンとかかれていないとか、CSSの指定が悪いとか、ブラウザが悪いとか自分のせいじゃない事でも 崩れる原因は、たくさんあります。

    上の場合は、</div>が多いという点、

    htmlは、検証ツールを見つけるといいです。

    http://validator.w3.org/

    http://www.htmllint.net/

    などで、問題のないhtmlをつくりましょう

    テーマを、まったくの0から作るのは、とても大変な事です。自分が作ろうとするテーマに近い、公式テーマなどを参考にしながら作り始めるといいかもしれないです。

    既存のテーマには、たくさんのノーハウが詰まっています

    クラスをどのようなところに使えばいいですか?

    rockfunさんは、hrでクラスを、そのほかでは、idを使っていますが、なぜ、そのようにしようと思いましたか?

    トピック投稿者 rockfun

    (@rockfun)

    ヘッダーの多いdivは手打ちでここに書いてたのでそのときの間違いです。
    似たテーマを探して変えるほうが簡単ということでしょうか?
    似たテーマには、自分が使わないプログラミングなどいっぱいあるんですがそういうところは全部消してレイアウトしていくんでしょうか?3カラムなんでおすすめのテーマあったら教えてほしいです。

    トピック投稿者 rockfun

    (@rockfun)

    ありがとうございます。順番が逆になっちゃいましたが、それじたいネットで無料であったWordPressとは違った3カラムテンプレートです。hrで解除しているので使ったことがないhrを変えるのは難しいです。

    どういう手順でHTMLテンプレートをワードプレステンプレートに移行させてるのかわかりませんが、一気に分割せずにheader、footer、sidebarと順を追って分割してチェックすればどこに問題があるのか推測できると思うのですが。

    あと、それぞれのテンプレート内で必ず<div>で始まって</div>で終わらなければいけないわけでもないのでrockfunさんがおっしゃってるようにfooter.phpにcontainer終了を含めても問題ありません。

    <hr class=”clear” /></div> //content終了のcontent終了タグもどのファイルに含めてやればいいかわかりません。

    これも従来ある位置のままsidebar.phpに含めれば良いと思います。

    提示されているHTMLソースの分割例です

    header.php

    <!DOCTYPE html>から<body>まで
    ※</head>直前に<?php wp_header();?>
    <div id="header"></div>
    <div id="container">
    <div id="page">
    <div id="content">
    <div id="main">3カラムの真ん中開始

    sidebar.php

    </div>3カラムの真ん中終了
    <div id="leftbar"> //左サイドバー開始
    </div> leftbar終了
    <hr class="clear" /></div> //content終了
    <div id="rightbar">
    </div> //rightbar終了

    footer.php

    </div> //page終了
    <div id="footer"></div> //フッター終了
    </div> content //container終了
    <?php wp_footer();?>
    </body>
    </html>

    index.php

    <?php get_header();?>
    ループとかメイン部分
    <?php get_sidebar();?>
    <?php get_footer();?>

    divの入れ子がややこしくならないように、メンテナンスしやすいように好みで区切ればよいとおもいます。
    カスタマイズ途中で間違えて閉じタグを消してしまったりしにくいように・・・
    特にこのテンプレートの場合はサイドバーの部分がややこしそうですね。

    もう一つのウィジェットの質問ですが、ワードプレスをインストールしたときに最初に設定されているウィジェットですね。
    初期のテンプレート(最新のワードプレスをインストールされたのならTwenty Twelveだと思います)に戻してダッシュボードの外観→ウィジェットで一度確認してみてもらえませんか。
    もしなにかキャッシュ系のプラグイン(WP Super Cacheなど)を使用中でしたらそれも無効にしてください。

    トピック投稿者 rockfun

    (@rockfun)

    おかげさまでできました!ありがとうございました。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「オリジナルテーマ作成時のレイアウト崩れと、ウィジェットデフォルト削」には新たに返信することはできません。