WP ナビゲーションメニューの追加方法

PrimaryメニューとSecondaryメニューを追加する場合
function.phpに以下を追加

add_theme_support('nav-menus');
if ( function_exists('register_nav_menu') ){
    register_nav_menu('primary','Primary'); //一つ目のメニュー
    register_nav_menu('secondary','Secondary'); //2つ目のメニュー
}

すると、
WP管理画面→外観→メニューの下部がこんな感じになります。
img

あとは表示させたい場所に、

<nav id="access" role="navigation">
     <?php wp_nav_menu( array(
         'container' => false, 
         'menu_class' => 'navi-link', 
         'menu_id' => 'primary-menu', 
         'theme_location' => 'primary' 
     ) ); ?>
</nav>

という感じで放り込むだけです。

いや、こっちのほうがシンプルでよいですね

function.php

//メインメニュー
register_nav_menus(array('main_menu' => 'メインメニュー'));
//サブメニュー
register_nav_menus(array('sub_menu' => 'サブメニュー'));

表示させたいテンプレファイルにはこっち

<?php wp_nav_menu(array('theme_location' => 'main_menu')); ?>

<?php wp_nav_menu(array('theme_location' => 'sub_menu')); ?>

WP トップページに固定ページを組み込む

クライアントさんご自身がページの更新を行う際に、便利?

トップページには、最新記事を表示したり、PHPがずらずら並んでいたりで
クライアントさんにテンプレートファイルを触らせるなんて論外!ということ、多々あると思います。

というわけで、触っていい部分だけを固定ページで編集できるようにしてしまえー!という時の方法。

1.トップページ(触っていい部分)用固定ページを用意
2.index.phpに下記を記述

<?php
$page_id = XXX;//固定ページのID
$page= get_post($page_id);
echo apply_filters('the_content', $page->post_content);
?>

これで、クライアントさんは簡単にトップページの更新ができるし
わたしたちはクライアントさんの暴挙に怯えることがなくなるし
みんなHappyですね。めでたしめでたし。

Contactform7強化プラグイン

Contactform7に確認画面を簡単に追加できるプラグイン 「Contact Form 7 add confirm」

http://www.eyeta.jp/archives/908
有効にすると、Contactform7メニューからフォームを作成する画面の「タグの作成」の選択肢の中に「確認ボタン」「戻って編集ボタン」の2つが追加されるという便利プラグイン。

個人的には、確認画面行く前に確認せいって思うけど、必要と思う方は結構いるようなので。。
特にお堅いサイトを作るときに事前に導入してたら、喜ばれました。

レスポンシブ対応table レイアウトまとめ

CSSで出来るレスポンシブ対応を考えた table レイアウト

WEB DEVELOPMENTさん http://www.unionnet.jp/develop/responsive-table-css/

リキッド・レイアウトでチェックボックスを綺麗に並べる

WebOS Goodiesさん http://webos-goodies.jp/archives/51275332.html

table に指定しておきたい CSS メモ

understandardさん http://www.understandard.net/css/css009.html

以上の参考サイト様方のおかげでたどり着いた
わたしが大体のサイトに貼り付けているCSSはこちらです

レスポンシブサイトでtableレイアウトに困ったときの、とりあえず貼っておくCSS

 
@media screen and (max-width: 480px) {
	table.smart {
		margin: 0 -10px;
		table-layout: fixed;
	}
	table.smart th,
	table.smart td {		
        	width: 100%;
		display:block;
		padding:5px;
		border:none;
	}
	table.smart input[type="email"],
	table.smart textarea,
	table.smart input[type="submit"] {
		width:95%;
	}
	/* ラベルタグで囲んだチェックボックスの表示 */
	table.smart .wpcf7-list-item label {
		display: inline-block;
		width: 100%;
	}
	table.smart .wpcf7-list-item label:hover {
		background: #E4E4E4;
		font-weight:bold;
	}
}

サイドバー追加

function.phpに以下を追記。

テーマ:Twenty fifteen の書き方に忠実?に書く場合
(function.php内元々のウィジェットの記述をコピーしただけ)

 
register_sidebar( array(
	'name'          => __( 'Original Widget Area' ),
	'id'            => 'sidebar-original',
	'description'   => __( 'ここにはウィジェットの説明が入ります。' ),
	'before_widget' => '<aside id="%1$s" class="widget %2$s">',
	'after_widget'  => '</aside>',
	'before_title'  => '<h2 class="widget-title">',
	'after_title'   => '</h2>',
) );

ディスクリプションとかいらないし、わたしはこんな感じで簡略化させて使っています。

register_sidebar(array(
     'name' => 'Original Widget Area' ,
     'id' => 'sidebar-original' ,
     'before_widget' => '<div class="widget">',
     'after_widget' => '</div>',
     'before_title' => '<h3>',
     'after_title' => '</h3>'
));

あとは、テンプレートファイルの表示させたい場所に

<?php dynamic_sidebar('sidebar-original'); ?>

を貼るだけ。
「sidebar-original」の部分は、function.phpに記述したidと対応させればOKです。

カスタム投稿をカテゴリー、タグ、アーカイブ一覧に含める

function.phpに以下を追加

add_action( 'pre_get_posts', 'foo_modify_main_query' ); // pre_get_postsにフック
// フック時に使う関数
function foo_modify_main_query( $query ) {
  if ( is_admin() || ! $query->is_main_query() )
    return;
 
    if ($query->is_category) {
      $query->set('post_type', array( 'post', 'column' ) );
    return;
  }
 
    if ($query->is_tag) {
      $query->set('post_type', array( 'post', 'column' ) );
    return;
  }
 
    if ($query>is_archive) {
      $query->set('post_type', array( 'post', 'column' ) );
    return;
  }
 
}

CSSで文字列を省略して「…」を付与する

表示領域を決めて、text-overflowを使う

text-overflowを使うと、widthで指定した表示領域からはみ出した文字列を「…」で省略することができます。

text-overflowを使った例

どこまでも広がる空に光がさして、地球の最後の日になって欲望のタガが外れたら、アダムとイヴになれる。タフにこの世を生きる為に必要なもの、ちょっとぐらいの絶望も長い目で見りゃ極上のスパイスを味わえるoh yes

HTML

<p class="ellipsis">どこまでも広がる空に光がさして、地球の最後の日になって欲望のタガが外れたら、アダムとイヴになれる。タフにこの世を生きる為に必要なもの、ちょっとぐらいの絶望も長い目で見りゃ極上のスパイスを味わえるoh yes</p>

CSS

.ellipsis {
    padding: 10px;
    width: 474px;
    border: 1px solid #A7D5CC;
    background: #C7F4E8;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis; /* Safari */
    -o-text-overflow: ellipsis; /* Opera */
}

さらに、「…」をなしにすることも可能です。

省略記号「…」を付けずに文字列を省略

どこまでも広がる空に光がさして、地球の最後の日になって欲望のタガが外れたら、アダムとイヴになれる。タフにこの世を生きる為に必要なもの、ちょっとぐらいの絶望も長い目で見りゃ極上のスパイスを味わえるoh yes

.clip {
    padding: 10px;
    width: 474px;
    border: 1px solid #D3CB93;
    background: #F2F1A9;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    -webkit-text-overflow: clip; /* Safari */
    -o-text-overflow: clip; /* Opera */
}

ブログ記事の抜粋などでよく見かける、文字数を制限して省略記号「…」を付ける方法ですが
大体の場合、設計の段階でPHP等で文字数を決めておくことが多いと思います。

実際にこの方法を使う場面は限られているかな、とは思いますが
わたしは以下のような場面でtext-overflowを使っています。

・半角と全角が混在する抜粋文で、文字数での制限だと長さがまちまちになってしまうとき
・動的に変化する表示領域にフィットさせたいとき
・複数箇所に抜粋文を表示させたいけれど、いちいちPHPを書くのが面倒なとき

他にもJQueryを使った方法なんかもあるようですが、
cssだけでシンプルに完結するので、気に入っています。

参考:Developers.IO http://dev.classmethod.jp/ria/string-replace-css-and-jquery/