HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

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>

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

スポンサーリンク

関連記事

スポンサーリンク

よく使うタグ

・float クリア
<br clear="all"><div style="clear:both;" class="clearfix"></div>
・角丸め
round-radius
border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;
・div box
overflow:scroll;min-width:300px;max-width:300px;min-height:300px;max-height:300px;
・TEXTAREAリサイズ
resize: vertical;
・サイトURL
home_url() // http://…
if(site_url()==home_url){
$shorturl_yuzu_path = substr(ABSPATH,0,strpos( ABSPATH, substr(site_url(),strlen(home_url()) ) ) ).’/’;
}else{
$shorturl_yuzu_path = ABSPATH.’/’;
}
// /var/…
・WP HOME URL
site_url() // http://…/wp
ABSPATH // /var/…/wp
・プラグイン(自分のDIR追加必要)
plugins_url() // http://…/plugins
WP_PLUGIN_URL // http://…/plugins
WP_PLUGIN_DIR // /var/…/plugins
・使用中のテーマ
get_template_directory_uri() // http://…/theme/xx
get_template_directory() // /var/…/theme/xx
・wp-content
content_url() // http://…/wp-content
WP_CONTENT_DIR // /var/…/wp-content
・画像URLからDIR変換
$pctdir=str_replace(content_url(), WP_CONTENT_DIR,$pcturl);
・パス名分解
$pathData = pathinfo($file);
echo $pathData["dirname"]; // /var/~
echo $pathData["filename"]; // xxx
echo $pathData["extension"]; // txt
echo $pathData["basename"]; // xxx.txt
・画像サイズ
list($width,$height) = getimagesize($url);
if(has_post_thumbnail()){
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , ‘full’ );
$src = $image[0]; //url
$width = $image[1]; //横幅
$height = $image[2]; //高さ
・画像サイズ比率
list($src_w,$src_h) = getimagesize($file);
$dst_w = 600;$dst_h = 0;
$dst_h = ($dst_w!=0)?(intval(($src_h*$dst_w)/$src_w )):(($dst_h!=0)?(intval(($src_w*$dst_h)/$src_h)):0);
・疑似要素順
link visited hover active


特殊文字
シングルクォート : &#39;
ダブルクォート : &quot;
WP設定内表示前処理(htmlタグ許可項目)
$str = str_replace(‘<','&lt;' ,$str);
$str = str_replace(‘>’,’&gt;’ ,$str);
$str = str_replace(‘\”‘,’&quot;’,$str);
$str = str_replace(“\'”,’&#39;’ ,$str);
WO設定項目表示前処理(htmlタグ許可項目)
$str = str_replace(‘\”‘,'”‘,$str);
$str = str_replace(“\'”,”‘”,$str);
・テーマ
get_theme_root_uri()
get_theme_root()
・WP 情報
get_bloginfo( $show )
・Wp config FTP 情報 設置
define( ‘FTP_HOST’, ‘host’ );
define( ‘FTP_USER’, ‘id’ );
define( ‘FTP_PASS’, ‘pw’ );
define( ‘FTP_SSL’, false );
弾に使う
placeholder:ユーザー入力補助

カテゴリー

flexbox インストールなど面倒なことなしにDIV BOX を横に並べるクラス

flexbox インストールなど面倒なことなしにDIV BOX を横に並べるクラス flexbox は、div の box を横に並べるためのブラウザに標準装備されてるクラス。乱暴な言い方すればそういうことです。現場では細かいことはどうでもよくて、とにかく簡単に DIV BOX を横

vba タスクに IE が残る

vba タスクに IE が残る vba タスクに IE が残る。VBAでブラウザ経由でサイトのページの情報を拾い上げる技は結構使いますよね?私だけ?wwwそうすると、なぜかvba タスクに IE が残っていて、繰り返し利用するとどん

wp datepicker 特定の項目で動かない。

wp datepicker 特定の項目で動かない。 ワードプレスでつかえる datepicker は、とっても簡単につかえて便利なライブラリーです。javascript は、なれないとデバッグに時間がかかり気持ち的にすごく敷居が高い気がしますがわかって

プラグインの管理画面でHTMLの入力を許すフィールドの扱い方

プラグインの管理画面でHTMLの入力を許すフィールドの扱い方 ワードプレスのプラグインを書いていると、HTMLタグを入力できるフィールドを作りたくなりますよね?例えば、ページにデータを表示するときにその書式を入力さえるとか。例えば、これはワードプレスのプラグイン

ワードプレスのフッターにある jQueryの読み込みをヘッダーで出力させる

ワードプレスのフッターにある jQueryの読み込みをヘッダーで出力させる ワードプレスのフッターにあるjQueryの読み込みをヘッダーで出力させる必要ができました。simplecity の後継ともいわれる ワードプレスのテーマ cocoon のカスタマイズです。cocoon

ワードプレスで jQuery の後に script を読み込ませる方法(動的スクリプトもOK)

ワードプレスで jQuery の後に script を読み込ませる方法(動的スクリプトもOK) ワードプレスで jQuery の後に script を読み込ませる方法、これは動的スクリプトも可能な方法です。ワードプレスのプラグインで動くシステムを開発していたところ、ユーザーインターフェイスでどう