追加したカスタム投稿タイプをページで表示する方法【WordPress】
カテゴリー・タグも含めた新しい投稿タイプを追加する方法【WordPress】inoma-design.hatenablog.com
↑のつづき
個別ページや固定ページなどで表示する方法。
カテゴリーとタグの場合
まずは作ったsample投稿のカテゴリーとタグの表示。
<?php echo get_the_term_list( $post->ID, 'sample_cat', 'カテゴリー: ', ', ' ); ?> <?php echo get_the_term_list( $post->ID, 'sample_tag', 'タグ: ', ', ' ); ?>
この記述では「カテゴリー：日記,料理,写真」のように表示される。
特に必要無い場合は( $post->ID, 'sample_cat', '' );
区切りたい文字を「''」の中に記述すればよい。
このままでは箇条書きになってしまうが、任意のHTMLを入れて記述したい場合。
<?php echo '<ul>'; echo get_the_term_list( $post->ID, 'sample_cat', '<li>', '</li><li>', '</li>' ); echo '</ul>'; ?>
個別ページの場合 single.php
既存である「single.php」を複製。
名前を「single-sample.php」にする。
sampleの部分は自分で新しく作ったphpのタイトルを記述。
これでsample投稿の個別ページに記事を書くと反映される。
固定ページの場合 page.php
single同様に、既存である「page.php」を複製。
名前を「page-sample.php」にする。
次にそのphpの上部に、固定ページのテンプレート名を記述。
<?php /* Template Name: サンプルページ */ ?> <!-- ここから下に本文 -->
これにより、管理画面で固定ページを作成するときに、この「サンプルページ」がテンプレートに追加されている。
続いて本文の部分
<?php $temp = $wp_query; $wp_query = null; $wp_query = new WP_Query(); $wp_query->query('post_type=sample' . '&paged=' . $paged . '&posts_per_page=8'); //posts_per_pageは表示する記事数 ?> <?php if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?> <!-- ループする部分 --> <h2><?php the_title(); ?></h2> <?php the_post_thumbnail(); ?> <div><?php the_excerpt(); ?></div> <?php endwhile; ?> <!-- ページ送り --> <?php else : ?> <!-- 記事がなかった時 --> <?php endif; ?>
「archive.php」の場合もこの文で呼び出す。
singleやpage同様、既存のphpを複製して「archive-sample.php」にする。
タクソノミーの場合 taxonomy.php
タクソノミーはカテゴリーやタグ別のページです。
「taxonomy-sample_cat.php」
「taxonomy-sample_tag.php」
上記同様、既存である場合は複製し、無い場合は新しく作ります。
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> <!-- ループする部分 --> <?php endwhile; ?> <!-- ページ送り --> <?php else : ?> <!-- 記事がなかった時 --> <?php endif; ?>
記述は従来の通りでOK。
一ページに表示する記事数制限は、上記の固定ページとは異なり、管理画面の設定＞表示設定で、表示する投稿数を指定するとよい。
カテゴリー・タグも含めた新しい投稿タイプを追加する方法【WordPress】
既存の「投稿」以外に、新しく追加する方法。
追加したいタイプのphpデータを作る
タイトル.phpで作成。
サンプルとして「sample.php」と表記。
<?php add_action( 'init', 'custom_post_sample' ); function custom_post_sample() { //管理画面で表示される $labels = array( 'name' => _x( 'サンプル', 'sample' ), 'singular_name' => _x( 'サンプル', 'sample' ), 'add_new' => _x( '新規作成', 'sample' ), 'add_new_item' => _x( '新規サンプルを追加', 'sample' ), 'all_items' => _x( 'サンプル一覧', 'sample' ), 'edit_item' => _x( 'サンプルを編集', 'sample' ), 'new_item' => _x( '新しいサンプル', 'sample' ), 'view_item' => _x( 'サンプルを見る', 'sample' ), 'search_items' => _x( 'サンプルを検索', 'sample' ), 'not_found' => _x( 'サンプルが見つかりません', 'sample' ), 'not_found_in_trash' => _x( 'ゴミ箱にサンプルはありません', 'sample' ), 'parent_item_colon' => _x( '親サンプル:', 'sample' ), 'menu_name' => _x( 'サンプル', 'sample' ), ); //投稿タイプの種類やサポート $args = array( 'labels' => $labels, 'hierarchical' => false, 'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'trackbacks', 'custom-fields', 'comments', 'revisions', 'sticky'), 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'show_in_nav_menus' => true, 'publicly_queryable' => true, 'exclude_from_search' => false, 'has_archive' => true, 'query_var' => true, 'can_export' => true, 'rewrite' => array( 'slug' => 'sample' ), 'capability_type' => 'post', 'menu_icon' => 'dashicons-carrot',//Wordpress Dashicons参照 ); register_post_type( 'sample', $args ); //カテゴリー設定 register_taxonomy('sample_cat','sample', array( 'label' => 'サンプルカテゴリー', 'labels' => array( 'popular_items' => 'よく使うイベントカテゴリー', 'edit_item' => 'イベントカテゴリーを編集', 'add_new_item' => '新規イベントカテゴリーを追加', 'search_items' => 'イベントカテゴリーを検索', ), 'public' => true, 'hierarchical' => true, 'rewrite' => array('slug' => 'sample/cat') ) ); //タグ設定 register_taxonomy('sample_tag','sample', array( 'label' => 'サンプルタグ', 'labels' => array( 'popular_items' => 'よく使うイベントタグ', 'edit_item' => 'イベントタグを編集', 'add_new_item' => '新規イベントタグを追加', 'search_items' => 'イベントタグを検索', ), 'public' => true, 'hierarchical' => true, 'rewrite' => array('slug' => 'sample/tag') ) ); flush_rewrite_rules(); } add_rewrite_rule('sample/cat/([^/]+)/?$', 'index.php?sample_cat=$matches[1]', 'top'); add_rewrite_rule('sample/tag/([^/]+)/?$', 'index.php?sample_tag=$matches[1]', 'top'); ?>
新しく作った投稿タイプのURLが、sample/~となるように、パーマリンク設定でカスタム構造を選び「%category%」を追加することを推奨。
menu_iconは投稿タイプのアイコン。
Wordpress Dashiconsというサイトでコピペをして好きなアイコンに変更できる。
https://developer.wordpress.org/resource/dashicons/
functioncs.phpで作ったデータを呼び出す
作ったsample.phpを任意のフォルダを新しく作り入れる。
名前は好きなように。
フォルダが無いままでも可能だが、後々増えたりすることも考えて新しく作っておくといいかも。
functions.phpは下記の通り記述
<?php // カスタム投稿タイプ呼び出し require_once( 'custompost/sample.php' ); ?>
これで追加は完了。
ちなみにsample.phpの記述をそのままfunctions.phpに書いてもok。
しかしややこしくなるのでこうして新しくファイルを作るといいかも。
続き
追加したカスタム投稿タイプをページで表示する方法【WordPress】inoma-design.hatenablog.com
animate完了後の処理、書き方２通り【jQuery】
地味に忘れちゃうのでメモ。
jQueryのanimateメソッドで、アニメーション完了後の動きを指定するとき、書き方が２通りある。
completeを使う場合
$('.sample').stop().animate({ width:'200px', height:'200px' },{ duration:200, easing:'easeInBack', complete:function(){ $(this).addClass('change'); } });
省略して書く場合
$('.sample').stop().animate({ width:'200px', height:'200px' }, 200, 'easeInBack', function(){ $(this).addClass('change'); });
Retina対応のスプライト関数で作る画像グローバルナビmixin【Scss & Compass】
画像を使うGrobalNaviに使える。
＊マジックインポートでhover画像もまとめて一枚にすると、Retina対応をさせるためサイズ縮小する際比率がおかしくなるので、まとめずに一枚画像で呼び出している。
使用する画像を用意
とりあえず３つ用意。
hover時の画像は_hoverと付けておく。
＊今回のやり方だと画像の幅は統一すること。
SCSS
あらかじめ「config.rb」の方で画像のリンク先「images_dir」を指定しておく。
@import "compass";//compassを呼び出す $gbnav-map: sprite-map("gbnav/*.png");//gbnavフォルダの画像を読み込み $gbnav-size:image-width(sprite-file($gbnav-map,nav01)); //gbnav画像サイズの原寸を計るためnav01.pngを呼び出している。 // 繰り返し処理 //================================= $value: 1; $i: 2;//サイズを半分にする @while $value <= 3 {//gbnavの数 .nav0#{$value}{ background: image-url("gbnav/nav0#{$value}.png") no-repeat{ size: ($gbnav-size / $i) ($gbnav-size / $i); } &:hover{ background: image-url("gbnav/nav0#{$value}_hover.png") no-repeat{ size: ($gbnav-size / $i) ($gbnav-size / $i); } } } $value: $value + 1; } // .gbNav //================================= .gbNav{ width: 960px; ul{ @include horizontal-list(0px);//横並びのcompass関数 li{ width:$gbnav-size / $i; height:$gbnav-size / $i; cursor: pointer; } } }
width:800pxの画像なら$iで半分にするため2の値を入れているので、width:400pxで表示される。
その都度縮小したい値を$iに入れる。
HTML
<div class="gbNav"> <ul> <li class="nav01"><a href=""></a></li> <li class="nav02"><a href=""></a></li> <li class="nav03"><a href=""></a></li> </ul> </div>
Sublimetextのスニペット登録方法
SublimeTextのスニペット登録の仕方。
コードの注釈、コメント等を入れておくと便利。
登録するスニペットファイルを入れておくフォルダを作っておく。
- Preferences > Browse Packages... を開く
- 新規フォルダを作成。例：「sunippet」フォルダなどわかりやすい名前で。
スニペットの登録
- ツール > スニペット追加(New Snippet)
すると新しいファイルが出てくる。
<snippet> <content><![CDATA[ ここに表示したいスクリプト ]]></content> <tabTrigger>ここにショートカットの文</tabTrigger> </snippet>
これを好きなように設定する。
たとえばこんな感じ
コードの区切りを入れておいて
<snippet> <content><![CDATA[ //====================================================== // midahsi //====================================================== ]]></content> <tabTrigger>midashi</tabTrigger> </snippet>
「midashi」と打ったら[tab]キー、もしくは自動で変換出てくるのでそれを選択。
