人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

http://taisy0.com/

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

●質問者: mkusume
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● rouge_2008
●150ポイント ベストアンサー

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


mkusumeさんのコメント
詳細な説明大変ありがとうございます。非常に勉強になります。

mkusumeさんのコメント
もしよろしければ http://q.hatena.ne.jp/1361846859 こちらの質問もご回答頂ければありがたいです。 宜しくお願い致します。

rouge_2008さんのコメント
既存回答で紹介されている方法で上手くいかなかったのでしょうか?

mkusumeさんのコメント
コメントありがとうございます。既存回答で確認したのですがうまくいきませんでした。

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

mkusumeさんのコメント
すいません。上記に関してはうまくいきました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ