wordpress3.5に関する質問です。


http://taisy0.com/

上記サイトのようにトップページのレイアウトをしたいと思っています。
必要なプラグイン、テンプレートの修正作業等を教えてください。

回答の条件
  • URL必須
  • 1人5回まで
  • 13歳以上
  • 登録:2013/02/26 11:38:35
  • 終了:2013/03/03 08:30:48

ベストアンサー

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512013/02/27 01:06:31

ポイント150pt

Twenty Elevenの一部のみ変更しますので、子テーマを作成してカスタマイズします。

1.まず最初に、テーマディレクトリ「wp-content/themes」に適当な名前で子テーマのディレクトリを作成します。

2.作成した子テーマのディレクトリに次の内容の「style.css」を作成します。

@charset "utf-8";
/*
Theme Name: Custom Eleven (適当なテーマ名をつけます)
Author: Your name
Description: Twenty Elevenカスタマイズ用の子テーマです。
Template:       twentyeleven
 */
@import url('../twentyeleven/style.css');


※この作業が完了した時点で、「外観」→「テーマ」で作成した子テーマを適用して大丈夫です。

3.Twenty Elevenの「header.php」(「wp-content/themes/twentyeleven/header.php」)を子テーマのディレクトリ内にコピーします。

4.子テーマにコピーした「header.php」を開いて、不要な箇所(※ヘッダー画像表示のコード)を削除します。(※削除するのは次の部分 - 78行目以降です。)

			<?php
				// Check to see if the header image has been removed
				$header_image = get_header_image();
				if ( $header_image ) :
					// Compatibility with versions of WordPress prior to 3.4.
					if ( function_exists( 'get_custom_header' ) ) {
						// We need to figure out what the minimum width should be for our featured image.
						// This result would be the suggested width if the theme were to implement flexible widths.
						$header_image_width = get_theme_support( 'custom-header', 'width' );
					} else {
						$header_image_width = HEADER_IMAGE_WIDTH;
					}
					?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
				<?php
					// The header image
					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
					if ( is_singular() && has_post_thumbnail( $post->ID ) &&
							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) &&
							$image[1] >= $header_image_width ) :
						// Houston, we have a new header image!
						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
					else :
						// Compatibility with versions of WordPress prior to 3.4.
						if ( function_exists( 'get_custom_header' ) ) {
							$header_image_width  = get_custom_header()->width;
							$header_image_height = get_custom_header()->height;
						} else {
							$header_image_width  = HEADER_IMAGE_WIDTH;
							$header_image_height = HEADER_IMAGE_HEIGHT;
						}
						?>
					<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
				<?php endif; // end check for featured image or standard header ?>
			</a>
			<?php endif; // end check for removed header image ?>



5.「外観」→「ウィジェット」で「フッターエリア1~3」に表示するウィジェットを設定すると、フッターのWordPressのクレジット表記の上にフッターウィジェットエリアが表示されます。
※サイドバーについても、「メインサイドバー」に表示するウィジェットを設定します。

6.コピーライトを表示する場合、「header.php」と同じように「footer.php」を子テーマのディレクトリにコピーして編集します。
※「<div id="site-generator">」の直前にコピーライト表記のエリアを追加します。(好みの表記に変更してください。)

			<div id="copyright">
				Copyright &copy; <?php bloginfo( 'name' ); ?> 

			</div>

			<!-- この行の前に上記を追加 -->
			<div id="site-generator">


7.「style.css」でデザインを調整します。(※一例ですので、好みに合わせて指定してください。)

#copyright {
	border-top: 1px solid #ddd;
	color: #555;
	font-size: 80%;
	font-weight: bold;
	text-align: center;
	padding: 10px;
}



ここまで完了すると、参考サイトと同じようなレイアウト構成になっていると思います。
Twenty Elevenのテンプレートや「style.css」を直接変更してもかまいませんが、子テーマを作成してカスタマイズした方が、変更しても簡単に元に戻せるのでおすすめです。
その他のデザインについても、子テーマのstyle.cssで変更するといいです。
※子テーマの仕組みについては次のページを参考にしてください。

・子テーマ
http://wpdocs.sourceforge.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E

他4件のコメントを見る
id:rouge_2008

どのように上手くいかなかったのでしょう?
※「○○のように表示されるのを期待していたけれど、△△のようになってしまう」など、上手くいかない動作をなるべく詳しく教えてください。

2013/02/28 02:33:20
id:mkusume

すいません。上記に関してはうまくいきました。

2013/03/02 17:36:27
  • id:rouge_2008
    参考サイトは、「ヘッダー+ナビゲーションメニュー+コンテンツエリア(記事+サイドバーの2カラム)+フッターウィジェットエリア+フッター」という構成になっているようです。
    レイアウト自体は、テンプレートとstyle.cssで編集しますが、現在はどのテーマを利用していますか?
    テーマを最初から作成する方法でしょうか?
  • id:mkusume
    テンプレートはtwenty-elevenを利用する予定です。
  • id:rouge_2008
    参考サイトで利用しているテーマは、次のサイトでダウンロードできます。

    http://newwpthemes.com/arnica-free-wordpress-theme/
    ※個人サイトおよび商用サイトでの利用は無料
    ※スポンサーリンクを編集および削除する場合はStandardライセンス、クライアントのサイトに使用する場合はDeveloperライセンスを購入する必要があります。(詳細は「http://newwpthemes.com/pricing/」を参照してください。)

    Twenty Elevenからカスタマイズする方法も必要でしょうか?
  • id:mkusume
    コメントありがとうございます。可能であればTwenty Elevenからカスタマイズする方法も知りたいです。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません