Smart Custom Fields

手軽にカスタムフィールドを導入できるプラグイン「Smart Custom Fields」の使い方など。

導入方法

プラグインの新規追加から「Smart Custom Fields」を検索するか、下記URLよりダウンロードします。
https://ja.wordpress.org/plugins/smart-custom-fields/

  • 「Smart Custom Fields > 新規追加」から、タイトルを入力。
    「フィールド追加」を選択します。
  • 「繰り返し」にチェックを入れると繰り返し機能が使えます。
    その際ボックス最下部の「サブフィールドを追加」から繰り返すカスタムフィールドを追加できます。
  • 「名前」欄にはカスタムフィールドを出力する際のキーを入力します。
    分かりやすい半角英数字の名前がよいかもめ。

簡単な動画投稿フォームの作成例

グループ名
「グループ名」=video
ひとつめ
「タイプ」=テキスト、「名前」=url
ふたつめ
「タイプ」=テキスト、「名前」=title
みっつめ
「タイプ」=テキストエリア、「名前」=description
<?php $repeat_group = SCF::get('video');
	foreach ( $repeat_group as $fields ) {
    	echo '<div class="video">';
		echo '<iframe width="320" height="240" src="' . $fields['url'] . '" frameborder="0"></iframe>';
		echo '<h2>' . $fields['title'] . '</h2>';
		echo '<div class="description">' . nl2br($fields['description']) . '</div>';
    	echo '</div>';
	}
?>

▲カスタムフィールドの内容を取得するコード。
6行目のnl2br()によりテキストエリアの改行を取得します。

作者様サイト→http://2inc.org/blog/2014/10/09/4426/

タグクラウドのカスタマイズ

function theme_new_tag_cloud($args) {
	$myargs = array(
		'smallest' => 12, 
		'largest' => 12, 
		'unit' => 'px',
		'number' => 0,  
		'order' => 'ASC',
		'separator' => ''
	);
	return $myargs;
}
add_filter('widget_tag_cloud_args', 'theme_new_tag_cloud');

上記コードをfunction.phpへ追加、すでにある場合は編集します。
それぞれのパラメータは下記の通りです。

  • smallest → 最小サイズ
  • largest → 最大サイズ
  • unit → フォントサイズの単位
  • number → 表示数(0で無制限)
  • order → 並び順
  • separator → タグとタグの繋ぎ目

詳細はテンプレートタグ/wp tag cloud – WordPress Codex 日本語版にてご確認ください。

カスタムフィールドの住所からgooglemapへのリンクを生成

[map]のキーを持つフィールドに住所を入力し、その住所からGoogle mapへのリンクを生成します。

<?php 
  $address = post_custom('map');
  $address_encode = urlencode($address);
  $zoom = 14;
            
  $gmap = "http://maps.google.co.jp/maps?q=".$address_encode."&z=".$zoom;
?>
<a href="<?=$gmap;?>" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/estate/maps.jpg"></a>

rssにカスタムフィールドの値も入れたい!

要は出力されるRSSをカスタマイズしたい!
調べてみたけどサッパリわかりませんでした、勉強不足です!

先ずはfeedを出力させる側のwpにカスタマイズ

フォーラムの方ではどちらも解決されていたようですが頭の悪い僕にはサッパリでしたので
つまりテンプレートを用意すればいいんじゃね?と思い
http://wordpress.org/extend/plugins/feed-template-customize/
↑のプラグインをインストール
wp-include内のfeed-rss2.phpをテーマフォルダにコピー
コピーしたファイルをwpのカスタマイズ時と同じように変更
下記のようにphpファイルの中身はループ分のみ、というか表示させたい部分のみで構いません
カスタムフィールドも入れられるし、柔軟性高いね!

<table class="parent1">
  <tr>
    <th scope="col" class="child1">セミナー名・詳細</th>
    <th scope="col" class="child2">日 時</th>
    <th scope="col" class="child3">開 場</th>
    <th scope="col" class="child4">備 考</th>
  </tr>
  <?php
  $posts = get_posts('numberposts=0');
      global $post;
  ?>
  <?php if($posts): foreach($posts as $post): setup_postdata($post); ?>
  <tr>
    <td class="child1" id="post<?php the_ID(); ?>">
      <dl>
        <dt><?php the_title(); ?></dt>
        <dd><?php the_content(); ?></dd>
      </dl>
    </td>
    <td class="child2"><?php echo nl2br(post_custom('date')); ?></td>
    <td class="child3"><?php echo nl2br(post_custom('hall')); ?></td>
    <td class="child4"><?php echo nl2br(post_custom('remarks')); ?></td>
  </tr>
  <?php endforeach; endif;?>
</table>

あたりまえだけど文字コードはちゃんとUTF-8で保存しないと全力で文字化けします

フィードにアクセスしたらちゃんと表示されてるっ!

次に読み込み

別ドメインへのアクセスはjQueryではできないのでphpで
埋め込みたい場所に下記を記述

<?php
  $feed = file_get_contents("表示させたいページのURL");
  print $feed;
?>

今回は「表示させたいページのURL」はwpのfeedになるから
「http://ドメイン/wp/category/カテゴリー名/feed」とかになるよね!
ページをphpにて保存!もちろんutf-8で!

無事に表示されました

なんかfeedとかrssっぽくないけど・・・。

ちゃんと理解してfunction.phpなんかを編集できる人は本当にすごいな、と。
僕はまだまだ勉強不足だなーと実感しました。

参考にさせて頂いたフォーラムの記事

http://ja.forums.wordpress.org/topic/3563?replies=5
http://ja.forums.wordpress.org/topic/7957

使用させて頂いたプラグイン

Feed Template Customize

参考にさせて頂いたプラグイン実装方法

Feed Template Customize | dogmap.jp

詳細ページに同一カテゴリーの記事一覧を表示

詳細ページのナビゲーションに、その記事が所属しているカテゴリの記事一覧を表示させたいとき。

<ul id="product_<?php $cat = get_the_category(); $cat = $cat[1]; { echo $cat->slug; } ?>">
  <?php
  foreach((get_the_category()) as $cat) {
  $cat_id = $cat->cat_ID ;
  break ;
  }
  $query = 'cat=' . $cat_id. '&showposts=10';
  query_posts($query) ;
  ?>
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <li><a href="<?php the_permalink(); ?>"/><?php the_title()?></a></li>
  <?php endwhile; endif; ?>
  <?php wp_reset_query() ?>
</ul>

しかしこれだと親カテゴリが同じ場合、子カテゴリが違っているものも表示されます。

子カテゴリで分けたい場合。

<ul id="product_<?php $cat = get_the_category(); $cat = $cat[1]; { echo $cat->slug; } ?>">
  <?php
  foreach((get_the_category()) as $cat) {
  $cat_id = $category[1]->cat_ID ;
  break ;
  }
  $query = 'cat=' . $cat_id. '&showposts=10';
  query_posts($query) ;
  ?>
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <li><a href="<?php the_permalink(); ?>"/><?php the_title()?></a></li>
  <?php endwhile; endif; ?>
  <?php wp_reset_query() ?>
</ul>

ulのid属性に「product_記事のスラッグ名」が入ります。
これをdreamweaverのテンプレート内に持っていきたくて、jQueryのappendToで連れてったりしました。
ゴリ押し くコ:彡
カテゴリ毎にidも決まっているので割とスムーズにいけると思います。

パンくずナビなんかで子カテゴリの名前を表示させたい場合

<ul id="breadcrumb"><!--
  --><li><a href="../../../../index.html">HOME</a></li><!--
  --><li><a href="../../../../products.html">商品一覧</a></li><!--
  --><li><?php $category = get_the_category(); ?><a href="<?php echo get_category_link($category[1]->cat_ID) ?>"><?php $cat = get_the_category(); $cat = $cat[1]; { echo $cat->cat_name; } ?></a></li><!--
  --><li><?php the_title(); ?></li><!--
--></ul>

子カテゴリになる場合、$cat・$categoryの記述を$cat[1]・$category[1]に変更するといけます。

wordpressによるCMS

wordpressをCMSとして利用するときによく使う設定やコードなど。

パーマリンクの種類

wordpress管理画面、左カラムの「設定>パーマリンク設定」
カスタム構造のテキストボックス内に入力すると使用できます。
様々なサイトを巡ってみましたが、
「おすすめ!」は本当に人それぞれで一概にどれがいいとは言えません。
よく見られるのが「カテゴリ+投稿ID」や「日付+投稿ID」でしょうか。
下記のように記述しますが、勿論此れ以外にも自由に組み合わせて書き換える事もできます。

  1. 投稿ID:/%post_id%/
  2. 投稿名:/%postname%/
  3. 投稿名+.html:/%postname%.html:
  4. 日付+投稿名:/%year%/%monthnum%/%day%/%postname%/:
  5. カテゴリ+投稿ID:/%category%/%post_id%/
  6. カテゴリ+投稿名:/%category%/%postname%/
  7. 日付+カテゴリ+投稿名:/%category%/%postname%/

私は、投稿名を記事ごとにアルファベットとハイフンで置き換えています。
URLの一部が日本語になっても問題ない、若しくは記事ごとに入力するのが面倒じゃない方には「2」
クライアントのブログに利用する際には「1」を推します。

wordpressの埋め込み

<?php require './wp/wp-blog-header.php'; ?>

(埋め込むページからの相対パスを記述、この場合は同階層にwpというフォルダ名でwordpressを設置した際の記述です)
htmlファイルの1行目(DOCTYPEより上)に上記を記述後、拡張子をhtmlからphpに変更

wordpressをhtmlファイル内で動かす

.htaccessに下記内容を記述後、ルートフォルダへアップロードします。

AddType application/x-httpd-php .php .html

ロリポップサーバーをご使用の場合、上記記述では動作しませんので、
下記記述に書き換えてアップロードします。

AddHandler php5.2-script html

記事一覧に詳細ページの1枚目の画像を抽出

記事に含まれる1枚目の画像を抽出する│APPOFIT様

記事一覧の画像を非表示

<?php
  $my_content = get_the_content();
  $my_content = preg_replace("|(<img[^>]+>)|si","",$my_content);
  echo $my_content;
?>

新着情報などに。

wordpress内でのjQueryの記述

下記コメント部分に記述すれば普段の「$」でも動作します。

jQuery(function($) {
	// foo
});

もしくは下記をheader.php内のwp_head();より前に記述する事でも普段通りに動作するようになります。

<?php
	wp_deregister_script('jquery');
	wp_enqueue_script('jquery','https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js');
?>

googleにホスティングされているjQueryを読み込む際にはバージョンも確認してください。
https://developers.google.com/speed/libraries/#jquery

投稿、固定ページへのphpファイルの読み込み

下記をテーマファイル内functions.phpへ追記。

function Include_my_php($params = array()) {
    extract(shortcode_atts(array(
        'file' => 'default'
    ), $params));
    ob_start();
    include(get_theme_root() . '/' . get_template() . "/$file.php");
    return ob_get_clean();
} 

add_shortcode('myphp', 'Include_my_php');

投稿、固定ページの読み込みたい場所に下記コードを記述。
.phpは省略します。

[myphp file='example']

カテゴリ名の取得

<?php $category = get_the_category(); echo $category[0]->cat_name; ?>
<?php $category = get_the_category(); echo $category[1]->cat_name; ?>

1行目 親カテゴリ名のみ取得
2行目 子カテゴリ名のみ取得

所属する全てのカテゴリのスラッグ名を取得

半角スペース区切り、最後のスペースは削除します。
クラス属性などに。

<?php
$cats = get_the_category();
$str = '';
foreach( ( array )$cats as $cat ) {
	if( !in_array( $cat->cat_ID, $exclude ) ) {
		$str .=  $cat->slug . ' ';
	}
}
echo rtrim( $str, ' ' );
?>">

尚、6行目「slug」を「cat_name」に変更すると配列の内容がスラッグからカテゴリ名になります。

子カテゴリのスラッグ名から画像を出力

<img src="<?php bloginfo('template_url'); ?>/images/<?php 
    $cats = get_the_category();
    foreach($cats as $cat):
    if($cat->parent)
    echo $cat->slug;
    endforeach;
;?>.png">
  • テーマフォルダ > images > 子カテゴリのスラッグ名.png

新着記事などのアイコンを表示させる時など。

singleページのbody_classにカテゴリ名を追加

singleページのbodyタグのクラス属性にカテゴリスラッグ名を追加します。
function.phpに下記を追記。

add_filter('body_class','add_category_to_single');
function add_category_to_single($classes, $class) {
		if (is_single() ) {
				global $post;
				foreach((get_the_category($post->ID)) as $category) {
						$classes[] = 'category-'.$category->category_nicename;
				}
		}
		return $classes;
}

「category-カテゴリ名」が付与されます。
ここではカテゴリページでのクラス名と同じものにしていますが、6行目「category-」にて独自のものに変更可能です。

body_classの使い方

header.phpのbodyタグにbody_classを追記します。

<body <?php body_class(); ?>>

single カテゴリーごとにデザインを変更

single.phpをsingle-normal.phpにリネームし、新たに下記内容のsingle.phpを作成します。

<?php
if ( in_category(array('works')) ) {
   get_template_part( 'works' , false );
} elseif ( in_category( array('information') )  )  {
   get_template_part( 'information' , false );
} else {
    get_template_part( 'single' , 'normal');
}
?>

2行目「works」にカテゴリ名、3行目「works」に読み込むファイル名を記述します。
4行目「elseif~」から6行目「} 」までを増減する事で対応させたいカテゴリを増減できます。
カテゴリページのデザイン変更の場合は「category-カテゴリ名.php」のファイル名に変更するだけでオーケーです。
テーマファイルによってはcategory.phpが存在しないものもありますが、上記の通りで切り替え可能です。

ループ処理

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
記事を表示
<?php endwhile; ?><?php else : ?>
記事がない時の表示
<?php endif; ?>

新着情報などに使う時用

<dl>
<?php
	$posts = get_posts('numberposts=5&category=7');
	global $post;
?>
<?php if($posts): foreach($posts as $post): setup_postdata($post); ?>
  <dt><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></dt>
  <dd><? the_time('Y年n月j日 H時i分');?><br><?php the_content(); ?></dd>
<?php endforeach; endif;?>
</dl>

dlの中にdt、ddを繰り返し展開していくので、スクリプトをdlで囲います
numberposts=5は表示させる記事数
category=7は表示させたいカテゴリのID
the_time(‘y年m月d日’)は年(year)/月(month)/日(day)の表示形式、順番や間のスラッシュの変更も自由です
日付フォーマットに関する詳しい情報は小粋空間さんの「5.フォーマット文字一覧」にて記載されています
↓以下引用させて頂いたフォーマット一覧↓

出力される日付文字列の書式
単位 フォーマット文字 意味 表示例
Y 4桁の数字 1999, 2003
y 2桁の数字 99, 03
m 2桁の数字 01 – 12
n 1桁または2桁の数字 1 – 12
F フルスペル January – December
M 3文字の省略形式 Jan – Dec
d 2桁の数字 01 – 31
j 1桁または2桁の数字 1 – 31
曜日 D 3文字の省略形式 Mon – Sun
l フルスペル Sunday – Saturday
午前/午後 a 小文字 am / pm
A 大文字 AM / PM
h 2桁の数字・12時間表示 01 – 12
g 1桁または2桁の数字
12時間表示
1 – 12
H 2桁の数字・24時間表示 00 – 23
G 1桁または2桁の数字
24時間表示
0 – 23
i 先頭にゼロをつける 00 – 59
s 先頭にゼロをつける 00 – 59

以下は年月日・時分秒の設定早見表です。

年月日の設定早見表
設定例 表示
4桁 Y 2桁 m 2桁 d Y/m/d 2007/01/01
0なし j Y/m/j 2007/01/1
0なし n 2桁 d Y/n/d 2007/1/01
0なし j Y/n/j 2007/1/1
2桁 y 2桁 m 2桁 d y/m/d 07/01/01
0なし j y/m/j 07/01/1
0なし n 2桁 d y/n/d 07/1/01
0なし j y/n/j 07/1/1
時分秒の設定早見表
設定例 表示
12時間表記・2桁 h 2桁 i 2桁 s h:i:s 01:02:03
12時間表記・0なし g g:i:s 1:02:03
24時間表記・2桁 H H:i:s 13:02:03(01:02:03)
24時間表記・0なし G G:i:s 13:02:03(1:02:03)

条件分岐

<?php if (is_home()) { ?>
 <body id="index" <?php body_class(); ?>>
<?php } elseif (is_search()) { ?>
 <body id="search" <?php body_class(); ?>>
<?php } elseif (is_archive()) { ?>
 <body id="archive" <?php body_class(); ?>>
<?php } elseif (is_category()) { ?>
 <body id="cat-<?php the_category_ID(); ?>" <?php body_class(); ?>>
<?php } elseif (is_page()) { ?>
 <body id="<?php function get_page_uri2($page_id) {$page = get_page($page_id); return $page->post_name;} ?><?php echo get_page_uri2($wp_query->post->ID);?>" <?php body_class(); ?>>
<?php } elseif ( is_single()) {?>
 <body id="single" <?php body_class(); ?>>
<?php } else { ?>
 <body <?php body_class(); ?>>
<?php } ?>

勿論bodyのIDを変更する以外にも使用できます。
TOPのヘッタのみにカルーセルいれたりとか。

自動改行を解除

wordpressにより自動で挿入される「p」「br」タグの解除

固定ページ

page.php内get_header直後に下記を挿入

<?
remove_filter('the_content', 'wpautop');
the_content();
?>

brBrbrプラグイン使用時には一行追加します。

<?
remove_filter('the_content', 'wpautop');
remove_filter('the_content','brBrbr');
the_content();
?>

Contact Form 7

config.php内に下記を記述します。

define ('WPCF7_AUTOP', false);

※require_once(ABSPATH . ‘wp-settings.php’);より上に記述します。

Custom Field Gui 3

wordpressのカスタムフィールドはプラグインを利用して導入するのが楽です。
「かたつむりくんのWWW」より:

カスタムフィールドの改行

カスタムフィールドをテンプレートに適用する際に

<?php echo post_custom('キー')?>

上記のように記述する箇所を

<?php echo nl2br(post_custom('キー')); ?>

このように記述することで、改行も反映されます

Google Mapと併用

<?php $imagefield = get_imagefield('detail1image');
$attachment = get_attachment_object($imagefield['id']);
echo '<image src="' . $attachment['url'] . '" alt="' . $attachment['title'] . '" /><br />' . $attachment['content'] ;
?>

カスタムフィールドでアップロードした画像を表示し、その下にアップロード時に入力した画像の説明を表示

<a href="javascript:;" onclick="window.open('http://maps.google.co.jp/maps?q='+encodeURI('<?php echo post_custom('pref')?>'));return false;" target="_blank">地図はこちら</a>

カスタムフィールドキー「pref」に入力した住所からGoogle mapへのリンクを自動で生成