2018-09-12

wordpress 年ごとの記事表示

やりたいこと

2018年

記事01
記事02
記事03
記事04

2017年

記事01
記事02

こんな感じ

コード

<?php 
	$year = NULL; // 年の初期化
	$first = true; // ループの一回目を判定
	$args = array( 
	'post_type' => 'report', // 投稿タイプの指定
	'orderby' => 'date', // 日付順で表示
	'posts_per_page' => -1 // すべての投稿を表示
	);
	$the_query = new WP_Query($args); if($the_query->have_posts()){
		while ($the_query->have_posts()): $the_query->the_post();

			if ($year != get_the_date('Y')){ // 同じ年でなければ表示
				$year = get_the_date('Y'); // 年の取得
				// ループ一回目のみulの閉じタグを出力しない
				if ($first != true) {
					echo '</ul>';
					echo '</div>';
				}
				echo '<div class="year_archive_box">';
				echo '<p><a href="'.home_url( '/', 'http' ).'report/'.$year.'">'.$year.'年</a></p>';
				echo '<ul>';

				$first = false;
			}

			// 記事タイトル等の表示
			$url = esc_url(get_permalink());
			$ttl = esc_html(get_the_title());

			echo '<li><a href="' . $url .'" >' . $ttl . '</a></li>';

		endwhile; // ループの終了
		echo '</ul>';
		echo '</div>';
		wp_reset_postdata(); // クエリのリセット
	}
?>

参考

WordPress 年別アーカイブリストを表示する方法 - by Takumi Hirashima

2018-09-12

wordpress カスタム投稿いろいろ

### カスタム投稿タイプの追加

function create_post_type() {
  register_post_type( 'report',
    array(
      'labels' => array(
        'name' => __( 'レポート' ),
        'singular_name' => __( 'レポート' )
      ),
      'public' => true,
      'has_archive' => true,
      'supports' => array('title','editor','custom-fields'),
    )
  );
}
add_action( 'init', 'create_post_type' );

### 月別アーカイブ一覧の表示
Custom Post Type Permalinks をインストール
wp_get_archives() に post_type を追加

#### 参考
https://hirashimatakumi.com/blog/4086.html
WordPressでカスタム投稿の月別アーカイブを作る方法がやっと分かった - わぃおがわ

### カスタム投稿一覧表示

archive-スラッグ.phpの中身

// 取得条件
<?php
	$paged = get_query_var('paged') ? get_query_var('paged') : 1 ; //ページの判定
	$args =	array(
			'posts_per_page'   => 5, //表示件数
			'orderby'          => 'date', //ソートの基準
			'order'            => 'DESC', //DESC降順　ASC昇順
			'post_type'        => 'report',
			'paged'            =>  $paged, //ページネーションに必要
			'orderby'		   => 'date',
	);
?>
// 記事一覧表示
<?php
	$the_query = new WP_Query( $args );
	if ( $the_query->have_posts() ) {
	    while ( $the_query->have_posts() ) {
	        $the_query->the_post();
	        echo '<p>';
		        the_title();
	        echo '</p>';
	        // the_content();
	    }
	    wp_reset_postdata();
	}
?>
// ページャー
<?php
  global $wp_rewrite;
  $paginate_base = get_pagenum_link(1);
  if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
  $paginate_format = '';
  $paginate_base = add_query_arg('paged','%#%');
  }
  else{
  $paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
  user_trailingslashit('page/%#%/','paged');;
  $paginate_base .= '%_%';
  }
  echo paginate_links(array(
  'base' => $paginate_base,
  'format' => $paginate_format,
  'total' => $wp_query->max_num_pages,
  'type'  => 'list', //ul liで出力
  'mid_size' => 1, //カレントページの前後
  'end_size' => 0,
  'current' => ($paged ? $paged : 1),
  'prev_text' => '＜',
  'next_text' => '＞',
  ));
?>

function.phpの中身

<?php
// 最大取得件数を変更
// archive.phpのほうだけだとページャーが
// 管理画面で設定されたもので計算するためおかしくなる
function change_posts_per_page($query) {
    if ( is_admin() || ! $query->is_main_query() )
        return;
    if ( $query->is_archive('report') ) { //カスタム投稿タイプを指定
        $query->set( 'posts_per_page', '20' ); //表示件数を指定
    }
}
add_action( 'pre_get_posts', 'change_posts_per_page' );
?>

#### 参考
WordPressでコンテンツごとにアーカイブページの表示件数を変更するベストな方法 | それからデザインスタッフブログ
 固定ページにカスタム投稿タイプの一覧ページを作成する｜カスタム投稿タイプ
 WordPressでカスタム投稿のアーカイブでの表示件数を指定する方法 - ホームページ制作代行株式会社KOP

2018-04-19

コーディングよく忘れて調べるサイト

-webkit-overflow-scrollingを指定するときについでにやっておいた方がいいこと - Qiita

範囲外クリックでポップアップを閉じる正しい JQuery - Qiita

2018-04-19

vpn メモ

Virtual Private Networkの略

インターネットのなどを使用し、仮想的なプライベートネットワークを構築する。

IP制限がかかっていて社内のIPからしか接続できないようなものも、

VPNを使うことで外からでも接続できるようになる。

接続方法がわかりやすかったページ（pdf）

https://www.komazawa-u.ac.jp/m-students/files/win8_vpn.pdf

2018-04-18

google map 色の設定

		var mapObj = document.getElementById('map');
	var latLng = {lat: 0.000000, lng: 0.00000};
	var mapOptions = {
		center: latLng,
		zoom: 13,
		styles: [{
			"featureType":"landscape.natural",
			"elementType":"geometry.fill",
			"stylers":[
				{"visibility":"on"},
				{"color":"#fff"}
			]},
			{
			"featureType":"poi",
			"elementType":"geometry.fill",
			"stylers":[
				{"visibility":"on"},
				{"hue":"#ffff"},
				{"color":"#fff"}
			]},
			{
			"featureType":"landscape.man_made",
			"elementType":"geometry.fill"
			},
			{
			"featureType":"road",
			"elementType":"geometry",
			"stylers":[
				{"lightness":100},
				{"visibility":"simplified"}
			]},
			{
			"featureType":"road",
			"elementType":"labels",
			"stylers":[
				{"visibility":"off"}
			]},
			{
			"featureType":"transit.line",
			"elementType":"geometry",
			"stylers":[
				{"visibility":"on"},
				{"lightness":700}
			]},
			{
			"featureType":"water",
			"stylers":[
				{"color":"#fff"}
			]},
		],
	}
	var map = new google.maps.Map( mapObj, mapOptions);

2018-04-11

jQuery よく使うやつ　※随時更新

自分自身を含めたhtmlを取得

var prop = $("#prop").prop("outerHTML");

参考
https://takuo4649design.com/weblog/note/archives/7706

ラジオボタンの状態管理

$('input').each(function(i,elem) {
	var checkedElem;
	if($(this).prop('checked')) {
		checkedElem = $(this);
	}
});

参考
【jQuery】ラジオボタンの状態取得と選択制御 - Qiita

2018-04-10

wordpress tinymceのbodyにクラスを付与

function custom_editor_settings( $initArray ){
    $initArray['body_class'] = $titleset;
    return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

参考
WordPress のビジュアルエディタ TinyMCE に関するメモ | Web Design Leaves