タグ別アーカイブ: Twenty Twelve

wordpressトップページ(固定ページ)のタイトルを非表示にする

wordpress固定ページでは自動的にページのタイトルが表示されます。固定ページ作成時につけたタイトルが表示されます。トップページ以外はいいんですが、トップページに『TOP』と表示してあるのは、かっこ悪いので消したい！という場合に、content-page.phpを編集します。
参考サイトhttp://www.nishi2002.com/3836.html

twentytwelve デフォルト状態

<header class="entry-header">
			<?php if ( ! is_page_template( 'page-templates/front-page.php' ) ) : ?>
			<?php the_post_thumbnail(); ?>
			<?php endif; ?>
			<h1 class="entry-title"><?php the_title(); ?></h1>
		</header>

<?php if ( ! is_page_template( 'page-templates/front-page.php' ) ) : ?>

<?php the_post_thumbnail(); ?>

<?php endif; ?>

</header>

上記のものを下記のように書き換えます。

<header class="entry-header">
			<?php if(is_front_page()) : ?>
        		<?php else : ?>
            			<h1 class="entry-title"><?php the_title(); ?></h1>
        		<?php endif ?>
		</header>

<?php if(is_front_page()) : ?>

<?php else : ?>

<?php endif ?>

</header>

以上です。

WordPressのユーザー一覧ページ用のテンプレート

コメントをどうぞ

「WordPressのユーザー一覧ページを作る」の記事の続きです。
「メンバーが多いのでページ送りをしたい」という旨のご質問コメントをいただいたので、実装してみました。お使いのWPのバージョンやテーマが違う場合は、適宜、読み替えて参考にしてください。続きを読む →

WordPressの投稿メディア画像、縦写真がiphoneで見ると横になる。

3件の返信

質問内容は、記事のタイトルのまんまです。

アイキャッチ画像のように、デスクトップでは写真が縦に表示されているのに、iphoneでは横になってしまうのはなぜでしょうか？

よろしくお願い致します。

WPコンテンツを横並びにしたい。

2件の返信

WPでサイトを制作中です。↓
http://kuulei90.com/
トップページに画面いっぱい横長のアイキャッチ画像があります。その下に２つのコンテンツがあります。
①あいさつ文（これは直接固定ページにhtmlを書いた）
②pick up news!（これはfront-page.phpに記述。ニュースページに投稿があったら、サムネイル＆抜粋文を自動で表示/clubringo.comと同じ仕組み）

この２つを横並びにしようとcssでfloatしてもなりません。

どうしたら横並びになりますでしょうか？

WP テキストの背景に写真を表示させる

6件の返信

貴如意さんサイトのトップページ。http://kiraku07.info/
あいさつ文の背景に朝日の写真が表示されています。
WPで、このように固定ページに写真の上にテキストを表示させるには、どうしたらよいのでしょうか？

通常のHTML,CSSの場合はcssのbackground-imgで指定すれば良いのですが、
貴如意さんサイトを見ると写真とテキストは、それぞれdivで囲まれています。

それと、写真はレスポンシブになっています。それには何か指定が必要でしょうか？

よろしくお願い致します。

WP　動画挿入用プラグイン「Viper’s Video Quicktags」

コメントをどうぞ

動画挿入用プラグイン「Viper’s Video Quicktags」を入れてみました。

「YouTube」というボタンを押せばダイアログボックスが出てきますので、画像のurlを入れて下さい。
サイズも変えられるよ！
[youtube]http://www.youtube.com/watch?v=DC6J1kUd-64[/youtube]

参考サイト
http://wp-site.biz/4618

アイキャッチがある単独ページではヘッダー画像を表示しない

コメントをどうぞ

WordPressで複数ヘッダー画像をcssスライドショーで動かすで設定したヘッダー画像ですが、投稿にアイキャッチを入れることにした為、アイキャッチがある場合は邪魔になってきました。
そこでheader.phpを編集し、アイキャッチがある単独ページの場合はヘッダー画像を表示しないようにしてみました。

<header id="masthead" class="site-header" role="banner">
		<hgroup>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>

		<nav id="site-navigation" class="main-navigation" role="navigation">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->

		<?php
		/*****************************************************************************************
			front_pageだけ、ヘッダー画像を取得してcssで回す by タカハシ 2013-3-24
		*****************************************************************************************/ ?>
		<?php if( is_front_page() ):	/* front_pageならば */
			$images = get_uploaded_header_images();
			if($images):
			?>
			<div class="top_slides">
				<img src="http://clubringo.com/wp-content/uploads/2013/03/top-img-back.gif" alt="">
				<?php foreach($images as $image):?>
				<img src="<?php echo $image['url']?>" alt="">
				<?php endforeach;?>
			</div>
			<?php endif; /* front_pageここまで */ ?>
		<?php
		/*****************************************************************************************
			単独のページでアイキャッチがあれば、ヘッダー画像は出さない by タカハシ 2013-4-30
		*****************************************************************************************/ ?>
		<?php elseif( is_singular() && has_post_thumbnail( $post->ID ) ) :?>
		<?php
		/*****************************************************************************************
			ここまで
		*****************************************************************************************/ ?>
		<?php else : /* front_pageでなければ、Twenty Twelveの設定通り（固定かランダム） */ ?>
			<?php
			$header_image = get_header_image();
			if ( ! empty( $header_image ) ) : ?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
			<?php else: ?>
			<!-- no header_image -->
			<?php endif; ?>
		<?php endif; ?>
		<?php
		/*****************************************************************************************
			ここまで by タカハシ 2013-3-24
		*****************************************************************************************/ ?>
	</header><!-- #masthead -->

<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

</hgroup>

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

</nav>

<?php

/*****************************************************************************************

front_pageだけ、ヘッダー画像を取得してcssで回す by タカハシ 2013-3-24

*****************************************************************************************/ ?>

<?php if( is_front_page() ): /* front_pageならば */

$images = get_uploaded_header_images();

if($images):

<?php foreach($images as $image):?>

<?php endforeach;?>

</div>

<?php endif; /* front_pageここまで */ ?>

<?php

/*****************************************************************************************

単独のページでアイキャッチがあれば、ヘッダー画像は出さない by タカハシ 2013-4-30

*****************************************************************************************/ ?>

<?php elseif( is_singular() && has_post_thumbnail( $post->ID ) ) :?>

<?php

/*****************************************************************************************

ここまで

*****************************************************************************************/ ?>

<?php else : /* front_pageでなければ、Twenty Twelveの設定通り（固定かランダム） */ ?>

<?php

$header_image = get_header_image();

if ( ! empty( $header_image ) ) : ?>

<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>

<?php else: ?>

<?php endif; ?>

<?php

/*****************************************************************************************

ここまで by タカハシ 2013-3-24

*****************************************************************************************/ ?>

</header>

2013-4-19勉強会

1件のフィードバック

今回もお菓子をありがとうございます。（ランサーしょうじさん、かおりんごさん提供）
勉強会の概要は

“勉強会の議事録をトップページに表示させるには”について
カスタム投稿タイプの補足
投稿にアイキャッチを入れよう

でした。続きを読む →

勉強会の議事録をトップページに表示させるには

5件の返信

一番新しい議事録投稿記事のタイトル＆本文の最初の３０文字位をトップページに、表示させたい。
とりあえず、固定ページのトップページには、その表示させたい場所を作りました。

議事録を投稿したら自動でそこに表示させるにはどうしたらよいでしょうか？

phpを書く。プラグイン。ウィジェット。

2013-04-19の勉強会での勉強の題材として取り上げて下さい。

よろしくお願い致します。

上記の内容を2013-04-19の勉強会でやりました。以下議事録です。

①外観ーテーマ編集ーFront Page Template 固定ページテンプレート(page-templates/front-page.php)を開きます。そこに投稿カテゴリーの最新記事を呼び出して出力するphpを書きます。

コードは以下の通りです。

<aside id="topBanner">
			<section id="lastReport">
				<h1>最新の勉強会議事録</h1>
				<?php
				/* 最新の議事録を取得する */
				$args = array (
					"numberposts" => 1,
					"category" => 4,
				);
				$gPost = get_posts($args);
				foreach ($gPost as $post):
					setup_postdata($post);?>
					<a href="<?php the_permalink() ?>">
					<h1><?php the_title(); ?></h1>
					<?php //the_excerpt(); ?>
					<?php echo mb_substr(get_the_excerpt(), 0, 50); ?>
					</a>
				<?php endforeach;?>
			</section>
			<section id="lastQ">
				<h1>最新の質問と回答</h1>
				<?php
				/* 最新の最新の質問と回答を取得する */
				$args = array (
					"numberposts" => 1,
					"category" => 10,
				);
				$gPost = get_posts($args);
				foreach ($gPost as $post):
					setup_postdata($post);?>
					<a href="<?php the_permalink() ?>">
					<h1><?php the_title(); ?></h1>
					<?php the_excerpt(); ?>
					</a>
				<?php endforeach;?>
			</section>
			<section id="lastComment">
				<h1>最新のコメント</h1>
				<?php
				/* 最新のコメントを取得する */
				$args = array (
					"number" => 1,
					'status' => 'approve',
					"type" => 'comment',
				);
				$gComments = get_comments($args);
				foreach ($gComments as $com):
					//setup_postdata($post);
$userD = get_userdata($com->user_id);
?>
					<a href="<?php the_permalink($com->ID) ?>">
					<h1><?php echo get_the_title($com->ID); ?></h1>に
					<?php echo $userD->display_name; ?>さんがコメントしました。
					</a>
				<?php endforeach;?>
			</section>
		</aside>

<h1>最新の勉強会議事録</h1>

<?php

/* 最新の議事録を取得する */

$args = array (

"numberposts" => 1,

"category" => 4,

);

$gPost = get_posts($args);

foreach ($gPost as $post):

setup_postdata($post);?>

<?php //the_excerpt(); ?>

<?php echo mb_substr(get_the_excerpt(), 0, 50); ?>

</a>

<?php endforeach;?>

</section>

<h1>最新の質問と回答</h1>

<?php

/* 最新の最新の質問と回答を取得する */

$args = array (

"numberposts" => 1,

"category" => 10,

);

$gPost = get_posts($args);

foreach ($gPost as $post):

setup_postdata($post);?>

<?php the_excerpt(); ?>

</a>

<?php endforeach;?>

</section>

<h1>最新のコメント</h1>

<?php

/* 最新のコメントを取得する */

$args = array (

"number" => 1,

'status' => 'approve',

"type" => 'comment',

);

$gComments = get_comments($args);

foreach ($gComments as $com):

//setup_postdata($post);

$userD = get_userdata($com->user_id);

<h1><?php echo get_the_title($com->ID); ?></h1>に

<?php echo $userD->display_name; ?>さんがコメントしました。

</a>

<?php endforeach;?>

</section>

</aside>

今回は、「最新の勉強会議事録」「最新の質問と回答」「最新のコメント」の３つの最新情報をトップページに表示することにしたので、asideの中にsectionを３つ作りました。

メモ

"numberposts" => 1,
"category" => 4,

1 2	"numberposts" => 1, "category" => 4,

numberposts 1は最新の投稿を１つという意味です。
category 4はカテゴリーのID番号です。

カテゴリーIDの調べ方は、投稿ーカテゴリーのページでカテゴリー名にカーソルを持っていくと、画面下に表示されますので記憶して下さい。記憶力に自信がない人はメモをとって下さい。鉛筆でも万年筆でもクレヨンでも結構です。

上記のphpを書く場所ですが、今回はトップページの画像スライドショウのすぐ下に表示させる事になったので、page-templates/front-page.php内の

<div id="primary" class="site-content">

1	<div id="primary" class="site-content">

の下に書きました。

書く場所は、表示させたい場所によって異なります。ご注意ください。

②出力が出来ましたので、今度は適当に見た目を整えていきます。asideやsectionにidで名前を付けたので、そのidをcssでカスタマイズします。今回は、style.cssの一番下に書きました。

以上です。（真中のぶ）

先ほど、iphoneで見たら変な風になってたので、media queryで直しておかなきゃ！誰かやりたい人がいれば、やってくれてもいいですよ。

質問
firebugで見ると、sectionの中にh1が２つある事になっていますが、これは大丈夫なのでしょうか？？
（こちらは、解決済です。先生のコメント参照）

—————————————————–
追加情報　2013-04-27 真中のぶ

投稿のアイキャッチ画像のサムネイル表示を以下のスクリプトで実装出来るようです。

<?php
if ( has_post_thumbnail() ) {// check if the post has a Post Thumbnail assigned to it.
 the_post_thumbnail('thumbnail');
}
?>

<?php

if ( has_post_thumbnail() ) {// check if the post has a Post Thumbnail assigned to it.

the_post_thumbnail('thumbnail');

}

wp 2012 google web fontsを指定したらテキストが二重に表示されるは何故か？

3件の返信

制作中のサイト
http://kuulei90.com/
ページタイトル

<hgroup>
<h1 class="site-title">
<a rel="home" title="kuulei" href="http://kuulei90.com/">kuulei</a>
</h1>
<h2 class="site-description">official web site</h2>
</hgroup>

<a rel="home" title="kuulei" href="http://kuulei90.com/">kuulei</a>

</h1>

<h2 class="site-description">official web site</h2>

</hgroup>

h1 とh2にgoogle web fontsを使用しています。
デスクトップ（firefox）で見ると問題ないのですが、
iphoneで見ると文字が二重に表示されてます。
試しにデスクトップ（safari）で見たら
文字は二重にはなってないけど、太くなってしまっています。

フォントは、クローンのstyle.cssで指定してます。

何故でしょうか？

WP プラグイン all-in-one-event-calendar （イベント管理）を設置してみようぜ！の巻

1件のフィードバック

Q.WP プラグイン all-in-one-event-calendar （イベント管理）ってどんなもの？
A.カスタム投稿タイプを利用したwordpressのpluginです。(plug me inではありません)
「パソコン倶楽部りんご」サイトのトップページにある「勉強会の予定」とメニューの「calender」というページの表（カレンダー）がそうです。（２つは同期してるので便利）イベントやスケジュールを管理するのに便利そうです。

ではやってみます。ちなみに僕も初挑戦。

①まずは、all-in-one-event-calendarというプラグインをインストールして有効化する。有効化すると自動的にダッシュボードのメニュー（画面左に縦に並んでいる）にEventsという項目が追加されます。

②メニューのeventsのsettingsで色々と設定します。最初に大事なのは、どのページにカレンダーを表示させたいか
です。カレンダー専用のページが必要なら、その表示させたいページをあらかじめ固定ページで作っておく必要があります。settingsで「どのページにカレンダーを表示するの～？」という項目があるので、あらかじめ作って置いた固定ページを選択。

これで、ページにカレンダーが表示されました。そしたら適当にAdd Newで予定をいくつかアップしてみましょう。英語だけど良く読めば難しくないです。

③次は、トップページに予定の一部分を表示させます。これは、外観ーウィジェットで設定します。upcoming eventsというのが画面左にありますよね。それを画面右にドラッグする。トップページならフロントページウィジェットエリアだと思います。（人によって設定が違うと思うので「思います」としました。）ドラッグしたのをクリックすると、ちょっとした設定が可能です。何件表示させるとか。

大まかには、こんな感じです。色などはCSSとかで変えられると思います。（まだやってないけど）。
設定も色々あるので、これからやってみます。

こんな感じhttp://kuulei90.com/

これは、2013-04-12の勉強会で学びました。
——————————————–
先生。
これで大丈夫ですよね？

WP 2012 トップページに投稿ページの一部を表示させたい

3件の返信

現在制作中のサイトhttp://kuulei90.com/

クライアントさんの希望で、トップページに「次のライブ情報（日にちが近い１回分）」と「pick up（お勧めの１コ）」を載せたいという事です。

「次のライブ情報」は、投稿ページsheduleからと、「pick up」は、投稿ページnewsの一部を抜粋して表示といった感じです。クライアントさんがTopページ（固定ページ）を
いじらなくてもいいようにカスタムしようと思います。りんごのメンバー紹介とか近いのかなあ？

ザ未経験です。

雰囲気的にはPHPを書くんだろうなあーと感じています。
もしかしてプラグインであったらラッキーとも思っています。
視界が、ぼや～っとしています。

アドバイスやヒントを下さいませ。

よろしくお願いいたします！

WP TwentyTwelve ヘッダー画像をトップページにだけ表示させたい。

4件の返信

twenty twelveをカスタマイズ中です。
http://kuulei90.com/

ページによってヘッダー画像を変えたいと思っています。（ランダムではなく）

手順としては、
まず、外観ーヘッダーで設定するヘッダー画像をヘッダーだけに表示させようと思います。
ググッたらこちらのサイトがドンピシャだったのですが、記事の説明にある

<div id="header-img">ヘッダー画像</div>

1	<div id="header-img">ヘッダー画像</div>

が僕のheader.phpに見当たりません。どういうことでしょうか？
参考にしたサイト
http://presentnote.com/header_image-displayed-only-top_page/

教えて下さい。よろしくお願いします。

それができたら、固定ページの各編集画面に直接画像を設置しようと思います。
まだ、外観ーヘッダーで設定するヘッダー画像が残っている状態ですが、こんな感じ。
http://kuulei90.com/?page_id=20

/////////////////////////////////////////////////////////////////////////////////////////////
先生。早速の回答ありがとうございます。
理解しました。header.phpを以下の様に追加しました。

<?php if(is_front_page() ): ?><!--2013-04-09追加、これで囲むとヘッダー画像がTOPにだけ表示されます。-->
		<?php $header_image = get_header_image();
		if ( ! empty( $header_image ) ) : ?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
		<?php endif; ?>
<?php endif; ?><!--2013-04-09追加のとじタグです。-->

<?php if(is_front_page() ): ?>

<?php $header_image = get_header_image();

if ( ! empty( $header_image ) ) : ?>

<?php endif; ?>

<?php endif; ?>

これで、解決しました。
次は各固定ページに、それぞれのページの内容に合った画像を挿入していきます。

この、先生のコメントに対するコメントは、普通に返信でやると、「crayon」が使えないので、ここに追加で書きましたが、
コメントを返信でやった方が、第三者が分りやすいと思うのですが、良い方法はありますか？

WP Twenty Twelve 簡単にファビコンを設置出来るプラグイン”All in one Favicon”

1件のフィードバック

All in one Faviconというプラグインを入れました。
有効化した後は、簡単に設置出来ました。
↓

参考にしました。
http://affiliate-musuko.com/wp/wordpress/wordpressplugin/all-in-one-favicon.html

WP TwentyTwelve フッターの”Proudly powered by WordPress”を「Copyrightほにゃらら」に変更する

コメントをどうぞ

内容は記事のタイトルそのまんまです。
footer.phpを編集します。

<footer id="colophon" role="contentinfo">
		<div class="site-info">
			<?php do_action( 'twentytwelve_credits' ); ?>
			<!--コメントアウト<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentytwelve' ); ?>">
<?php printf( __( 'Proudly powered by %s', 'twentytwelve' ), 'WordPress' ); ?></a>-->
<!--下の一文は、新たに足した2013-04-08-->
 <?php printf( __( 'Copyright &copy; %s All Rights Reserved. ', 'twentytwelve' ), 'Kuulei90.com' ); ?>
		</div><!-- .site-info -->
	</footer>

<?php do_action( 'twentytwelve_credits' ); ?>

<!--コメントアウト<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentytwelve' ); ?>">

<?php printf( __( 'Proudly powered by %s', 'twentytwelve' ), 'WordPress' ); ?></a>-->

</div>

</footer>

4,5行目をコメントアウト。
7行目を追加。追加したら表示させたいテキストを入れる。テキストを入れる場所は、kuulei90.comと書いてある所。

That’s All….so easy

月	火	水	木	金	土	日
« 8月
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31