Affigerをカスタマイズした。


スポンサーリンク

シンプルなデザインで必要最低限の機能追加に絞り込んだ Affinger を入れてみました。
Affinger⇒「お金を稼ぐ」に特化したブログテーマ – AFFINGER(アフィンガー)
 
記事とかまだ入れてないけど、その前にわたし的に Affinger に足りないところを追加して使います。
 

Affinger に追加した機能

・ページごとにタイトルバナーを交換/非表示できるようにした。
・ページごとに日付の表示/非表示を指定できるようにした。
 

Affinger の投稿ページにページごとのフィールドを設定

これは、カスタムフィールドってものを追加するという意味になります。
カスタムフィールドは以下のように設定します。
function.php の一番下に以下を張り付けます。
/************** APPEND YUZUMARU **************
    entry_meta を 自分のファンクション名に置き換える 
    ex entry_meta_ -> my_meta_ 
*/
/* ENTORYの入力領域作成
	エントリー項目を設定
*/
$entry_meta_boxes =	array(
	"画像" => array(
		"name" => "headimg",
		"std" => home_url().'/',
		"title" => "ヘッダ画像",
		"type" => "text",
		"description" => "▲ヘッダ画像を入力"),

	"日付付加" => array(
		"name" => "datebox",
		"std" => "",
		"title" => "投稿日表示",
		"type" => "checkbox",
		"description" => "投稿日をつけない")
);
/* ここから下は触らなくても大丈夫 (「設定」のところの「エントリーページカスタマイズ」ぐらいかな?)*/
/* function body
	エントリーの表示
*/
function entry_meta_boxes() {
	global $post, $entry_meta_boxes;
	foreach($entry_meta_boxes as $meta_box) {
		$meta_box_value = get_post_meta($post->ID, $meta_box['name'], true);
		if($meta_box_value == "")
		$meta_box_value = $meta_box['std'];
		if($meta_box['type']=='text'){
			echo'<input type="hidden" name="'.$meta_box['name'].'_noncename" id="'.$meta_box['name'].'_noncename" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'" />';
			echo'<span style="font-weight: bold;">'.$meta_box['title'].' </span>';
			echo'<input type="text" name="'.$meta_box['name'].'" value="'.$meta_box_value.'" size="60" /><br />';
			echo'<p><label for="'.$meta_box['name'].'">'.$meta_box['description'].'</label></p>';
		
		}elseif($meta_box['type']=='textarea'){
			echo'<input type="hidden" name="'.$meta_box['name'].'_noncename" id="'.$meta_box['name'].'_noncename" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'" />';
			echo'<span style="font-weight: bold;">'.$meta_box['title'].' </span>';
			echo'<textarea name="'.$meta_box['name'].'" cols="60" rows="5"/>'.$meta_box_value.'</textarea><br />';
			echo'<p><label for="'.$meta_box['name'].'">'.$meta_box['description'].'</label></p>';
		}elseif($meta_box['type']=='file'){
			echo'<input type="hidden" name="'.$meta_box['name'].'_noncename" id="'.$meta_box['name'].'_noncename" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'" />';
			echo'<span style="font-weight: bold;">'.$meta_box['title'].' </span>';
			echo'<input type="file" name="'.$meta_box['name'].'" value="'.$meta_box_value.'" size="60" /><br />';
			echo'<p><label for="'.$meta_box['name'].'">'.$meta_box['description'].'</label></p>';
			echo'<p>&nbsp;</p>';

		}elseif($meta_box['type']=='textarea'){
			echo'<input type="hidden" name="'.$meta_box['name'].'_noncename" id="'.$meta_box['name'].'_noncename" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'" />';
			echo'<span style="font-weight: bold;">'.$meta_box['title'].' </span>';
			echo'<textarea name="'.$meta_box['name'].'" cols="60" rows="5"/>'.$meta_box_value.'</textarea><br />';
			echo'<p><label for="'.$meta_box['name'].'">'.$meta_box['description'].'</label></p>';
			echo'<p>&nbsp;</p>';

		}elseif($meta_box['type']=='checkbox'){
			echo'<input type="hidden" name="'.$meta_box['name'].'_noncename" id="'.$meta_box['name'].'_noncename" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'" />';
			echo'<span style="font-weight: bold;">'.$meta_box['title'].' </span>';
			echo'<input type="checkbox" name="'.$meta_box['name'].'" value="checked" '.$meta_box_value.'>'.$meta_box['description'].'<br /><br />';
		}
	}
}

/* 設定 */
function create_entry_meta_box() {
	global $theme_name;

	if ( function_exists('add_meta_box') ){
		add_meta_box( 'work-entry_meta-boxes', 
		'エントリーページカスタマイズ', 
		'entry_meta_boxes', 'post', 'normal', 'high' );

		add_meta_box( 'work-entry_meta-boxes', 
		'エントリーページカスタマイズ', 
		'entry_meta_boxes', 'page', 'normal', 'high' );
	}
}

/* 入力内容を保存 */
function entry_meta_save_postdata( $post_id ) {
	global $post, $entry_meta_boxes;
	foreach($entry_meta_boxes as $meta_box) {
	// Verify
		if ( !wp_verify_nonce( $_POST[$meta_box['name'].'_noncename'], plugin_basename(__FILE__) )) {
			return $post_id;
		}

		if ( 'page' == $_POST['post_type'] ) {
			if ( !current_user_can( 'edit_page', $post_id ))
				return $post_id;
		} else {
			if ( !current_user_can( 'edit_post', $post_id ))
				return $post_id;
		}

		$data = $_POST[$meta_box['name']];

		if(get_post_meta($post_id, $meta_box['name']) == "")
			add_post_meta($post_id, $meta_box['name'], $data, true);
		elseif($data != get_post_meta($post_id, $meta_box['name'], true))
			update_post_meta($post_id, $meta_box['name'], $data);
		elseif($data == "")
			delete_post_meta($post_id, $meta_box['name'], get_post_meta($post_id, $meta_box['name'], true));
	}
}
add_action('admin_menu', 'create_entry_meta_box');
add_action('save_post', 'entry_meta_save_postdata');
/************** /APPEND YUZUMARU **************/
 
これで記事投稿、固定ページ投稿で「新規追加」を開いてみよう。
投稿枠の下の方に「エントリーページカスタマイズ」の欄が表示されてるはず。
 

Affinger のタイトル画像の表示部分をカスタマイズ

Affinger のタイトル画像は、img タグで表示されているので、カスタマイズは比較的簡単。
CSS のバックグラウンドで指定されてるとCSSを動的に変更しないといけないのでもう少し手間がかかる。
ってことで、 header.php のカスタムヘッダーの部分を以下のように修正
				<!--
				カスタムヘッダー画像
				-->
				<div id="gazou">
					<?php if ( get_header_image() ): ?>
						<p id="headimg">

<?php
//---- custom ----
	$headimg=get_post_meta($post->ID, 'headimg', true); 
	if($headimg!=''&&$headimg!=home_url().'/'&&!is_home()){
		if(substr($headimg,0,4)!='http'){
		}else{
?>

							<img src="<?php echo $headimg; ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>">
<?php
		}
	}else{
	//---- org ----
?>
							<img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" >

<?php
	//---- /org ----
}
//---- /custom ----
?>


						</p>
					<?php endif; ?>
				</div>
 

Affinger の投稿ページ、固定ページの日付を表示/非表示にする

修正個所は、3か所。つまり、投稿ページ(single.php)、固定ページ(page.php)、それとトップページでの新着表示部。
 

Affinger の投稿ページの日付の表示/非表示

Affinger の singel.php を以下のように修正する。
					<div class="blogbox">
<?php 
	$datebox=get_post_meta($post->ID, 'datebox', true); 
	if($datebox==''){
?>
						<p><span class="kdate"><i class="fa fa-calendar"></i>&nbsp;
                <time class="entry-date" datetime="<?php the_time(DATE_W3C); ?>">
	                <?php the_time( 'Y/m/d' ); ?>
                </time>
                &nbsp;
								<?php if ( $mtime = st_get_mtime( 'Y/m/d' ) ) {
									echo ' <i class="fa fa-repeat"></i>&nbsp; ', $mtime;
								} ?>
                </span></p>
<?php
	}
?>
					</div>
 

Affinger の固定ページの日付の表示/非表示

Affinger の page.php を以下のように修正する。
				<?php wp_link_pages(); ?>
				<div class="blog_info contentsbox">
<?php 
	$datebox=get_post_meta($post->ID, 'datebox', true); 
	if($datebox==''){
?>
					<p>公開日:
						<time class="entry-date" datetime="<?php the_time(DATE_W3C); ?>">
							<?php the_time( 'Y/m/d' ); ?>
						</time>
						<br>
						<?php if ( $mtime = st_get_mtime( 'Y/m/d' ) ) {
							echo '最終更新日:', $mtime;
						} ?>
					</p>
<?php
	}
?>
				</div>
 

トップページでの新着表示部の日付の表示/非表示 の場所を探す

これをどうやって出しているのか推察しないといけない。
index.phpを見ると、こんな感じ。つまり、st_pagination ってところで出しているってことだな?
				<!--ページナビ-->
				<?php if ( function_exists( "st_pagination" ) ) {
					st_pagination( $wp_query->max_num_pages );
				} ?>
 
function.php に st_pagination って関数があるか調べる。
あったけど、これは違う。
 
トップのソースを開いてみると。。。
	<div id="kanren">
		<dl class="clearfix">
			<dt>
			<a href="http://affinger.yuzumaru.org/%e6%9c%aa%e5%88%86%e9%a1%9e/hello-world.html">
			<img src="http://affinger.yuzumaru.org/wp-content/themes/Affinger_20150613/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
			</a>
			</dt>
			<dd>
				<h3>
				<a href="http://affinger.yuzumaru.org/%e6%9c%aa%e5%88%86%e9%a1%9e/hello-world.html">
				Hello world!
				</a>
				</h3>
				<div class="blog_info">
					<p><i class="fa fa-clock-o"></i>&nbsp;
						2015/06/15						&nbsp;<span class="pcone"><i class="fa fa-tags"></i>&nbsp;
							<a href="http://affinger.yuzumaru.org/%e6%9c%aa%e5%88%86%e9%a1%9e/" title="未分類 の投稿をすべて表示" rel="category tag">未分類</a>							          </span></p>
				</div>
				<div class="smanone">
					<p>WordPress へようこそ。これは最初の投稿です。編集もしくは削除してブログ &#8230; </p>
				</div>
			</dd>
		</dl>
	</div>
 
kanren ってソースが関連していそうだ。kanri.php をみるとまんまやんw
だけど、日付を出している場所は、ここじゃないし、大体にして h5 じゃなくて h3 。
では、itiran.phpを見てみると、こっちは h3 でしかも展開されてるね。
これにコメントを打ち込んで実際にこれを使っているのか確認。
<div id="kanren">
<!--itiran.php-->
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<dl class="clearfix">
再表示してソースをみてやると。
												<aside>
					<div id="kanren">
<!--itiran.php-->
			<dl class="clearfix">

これで間違いない。
 

トップページでの新着表示部の日付の表示/非表示

前述のように itiran.php を以下のように修正
				<div class="blog_info">
					<p>
<?php 
global $id;
	$datebox=get_post_meta($id, 'datebox', true); 
	if($datebox==''){
?>
						<i class="fa fa-clock-o"></i>&nbsp;
						<?php the_time( 'Y/m/d' ); ?>
<?php
	}
?>
						&nbsp;<span class="pcone"><i class="fa fa-tags"></i>&nbsp;
							<?php the_category( ', ' ); ?>
							<?php the_tags( '', ', ' ); ?>
          </span></p>
				</div>

無事に表示にできましたとさ。

スポンサーリンク