Affigerをカスタマイズした。
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> </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> </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> <time class="entry-date" datetime="<?php the_time(DATE_W3C); ?>"> <?php the_time( 'Y/m/d' ); ?> </time> <?php if ( $mtime = st_get_mtime( 'Y/m/d' ) ) { echo ' <i class="fa fa-repeat"></i> ', $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> 2015/06/15 <span class="pcone"><i class="fa fa-tags"></i> <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 へようこそ。これは最初の投稿です。編集もしくは削除してブログ … </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> <?php the_time( 'Y/m/d' ); ?> <?php } ?> <span class="pcone"><i class="fa fa-tags"></i> <?php the_category( ', ' ); ?> <?php the_tags( '', ', ' ); ?> </span></p> </div>無事に表示にできましたとさ。
スポンサーリンク