WordPressでオリジナルテーマを作成する際、何度も何度も使うコードや記述があります。知ってはいるけどコードや記述を直接書くよりコピーペーストした方が早いってことは多いのではないでしょうか。テンプレート用にファイルを保存しておくと便利なんですがファイルを開くのが面倒なこともあり、Googleで検索した方が早いなんて場合も。そんなめんどくさがりな私(のような人)のために、1ページにまとめた記事があればいいかと思いこの記事を作成しました。WordPressのテーマ作成のお供になれば幸いです。
目次
1) テーマの新規作成時に役立つコードや記述
オリジナルテーマを作るときはいつも新規作成しています。HTMLからWordPressにテーマ化する際に便利なコード集です。
style.cssのテーマ情報
WordPressのテーマ作成に必須のテーマ情報の記述です。
1 2 3 4 5 6 7 8 9 |
/* Theme Name: xxxxxxx Theme URI: https://xxxxxxx.com/ Description: xxxxxxx Author: xxxxxxx Author URI: https://xxxxxxx.com/ Version: 1.0 . */ |
トップページへのリンク
トップページのURLを出力するWordPress関数です。この辺は直接書いたりテキストエディタで一括置換した方が早そうですね。
1 |
<?php echo get_option('home'); ?>/ |
header.phpとfooter.phpに記述するコード
この辺りを忘れるとプラグインで用意しているjavascriptが読み込まれなかったりします。
1 2 |
<?php wp_head(); ?> <?php wp_footer(); ?> |
各テンプレートファイルの読み込み
こちらも直接書いた方が早いかもですが、「get_template_part」とかはアンダースコアの位置ってこれでよかったっけ?って思ってしまいます。
1 2 3 4 |
<?php get_header(); ?> <?php get_sidebar(); ?> <?php get_template_part('xxxxx'); ?> <?php get_footer(); ?> |
2) ループに役立つコードや記述
サムネイルやカテゴリを含めると以外に面倒なのがループ。have_postだっけ?have_postsだっけ?はたまたhas_post?みたいな英語が苦手な私は毎回コピペしています。
メインループ
単純なループの記述。
1 2 3 4 5 6 7 8 |
<?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <?php endwhile; ?> <?php else : ?> <?php endif; ?> |
ちょっとリッチなメインループ
サムネイル画像の取得やカテゴリーの一覧取得などなど、HTML入りのメインループです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $post_title = get_the_title(); $post_id = get_the_ID(); //カテゴリの取得 $tax_name = 'category'; $terms_arr = get_terms($tax_name); $term_html = '<ul class="post_'.$tax_name.'_list">'; foreach($terms_arr as $term_obj) : $term_name = $term_obj->name; $term_id = $term_obj->term_id; $term_slug = $term_obj->slug; $term_html .= '<li><a class="tax_'.$tax_name.' term_'.$term_slug.'" href="'.get_term_link($term_id, $tax_name).'/" title="'.$term_name.'一覧へ">'.$term_name.'</a></li>'."\n"; endforeach; $term_html .= '</ul>'; //サムネイル画像 $img_size = 'thumbnail'; if(has_post_thumbnail()){ $post_img_src = get_the_post_thumbnail_url($post_id, $img_size); } else { $post_images = get_children( array( 'post_type' => 'attachment', 'post_mime_type' => 'image', 'post_parent' => $post_id, 'order' => 'DESC', 'numberposts' => 1 ) ); if(is_array( $post_images ) && ! empty( $post_images )){ $first_img = wp_get_attachment_image_src( current($post_images)->ID, $img_size); $post_img_src = $first_img[0]; } else { $post_img_src = get_option('home').'/xxxxx/noimg_'.$img_size.'.jpg'; } } //本文の整形 $post_cnt_length = 100; $post_cnt = $post->post_content; $post_cnt = apply_filters('the_content', $post_cnt); $post_cnt = str_replace(']]>', ']]>', $post_cnt); $post_cnt = str_replace(array(' ', ' ', ' '), '', wp_strip_all_tags( $post_cnt, true )); if (mb_strlen($post_cnt) > $post_cnt_length) { $post_cnt = mb_substr($post_cnt, 0, $post_cnt_length, 'UTF-8').'...'; } ?> <article class="post_box"> <h2><a href="<?php the_permalink(); ?>" title="<?php echo $post_title; ?>"><?php echo $post_title; ?></a></h2> <div class="post_thumnail"><img src="<?php echo $post_img_src; ?>" alt="<?php echo $post_title; ?>" /></div> <div class="post_detail"> <dl class="post_date"> <dt>日付</dt><dd><?php the_date('Y.m.d'); ?></dd> </dl> <dl class="post_category"> <dt>カテゴリー</dt><dd><?php echo $term_html; ?></dd> </dl> <div class="post_ex"> <p><?php echo $post_cnt; ?></p> </div> </div> </article> <?php endwhile; ?> <?php else : ?> <div class="post_not_found"> <h2>404 Error</h2> <p>ページが見つかりませんでした。URLが間違っているか、削除された可能性があります。</p> </div> <?php endif; ?> |
WP_Queryのループ
よく使う設定を入れ込んだWP_Queryを利用したループ。使わない設定もありますが、記述するより削除の方が楽なのでコピペで済ませています。サイドバーやカスタム投稿をデータとして利用している場合などによく使います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<?php $post_set = array( 'p' => 0, 'cat' =>0, 'posts_per_page' => 0, 'offset' => 0, 'post_type' => 'post', 'orderby' => 'date',//author、ate、title、medified、ID:ID、rand、meta_value、meta_value_num 'tax_query' => array( 'relation' => 'AND', //AND、OR) array( 'taxonomy' => 'category', 'terms' => array('news'), 'include_children' => true, 'field'=>'term_id', 'operator' => 'IN'//(IN、NOT IN、AND) ), ), 'meta_query' => array( 'relation' => 'AND', array( 'key' => '',//メタキー 'value' => '', //値(文字列か配列) 'compare' => '=', //'='、'!='、'>'、'>='、'<'、'<='、'LIKE'、'NOT LIKE'、'IN'、'NOT IN'、'BETWEEN'、'NOT BETWEEN' 'type' => 'CHAR' //'NUMERIC'、'BINARY'、'CHAR'、'DATE'、'DATETIME'、'DECIMAL'、'SIGNED'、'TIME'、'UNSIGNED' ), ) ); $post_query = new WP_Query($post_set); $post_max = $post_query->found_posts;//------記事の最大値 if($post_query->have_posts()) : while ( $post_query->have_posts() ) : $post_query->the_post(); ?> <?php endwhile; ?> <?php else : ?> <?php endif; wp_reset_postdata(); ?> |
3) ページテンプレート作成に役立つコードや記述
コーポレートサイトをWordPressで構築する場合、ちょっとしたプログラムを組んで利用するページが必要なことが多々あります。そんなときに役立つページテンプレートの作成時に役立つ記述です。
ページテンプレートの情報
スペースだとかスペルミスを防ぐためにもコピペが一番ですね。
1 2 3 4 |
<?php /* Template Name: xxxxxxxxxxxxxxx */ |
4) カスタム投稿、カスタム分類の登録に役立つコードや記述
WordPressがより便利になったカスタム投稿とカスタム分類の登録。プラグインを使わなくとも、コピペをすれば簡単に登録できます。ただ、データとして扱う場合などはpuclicなどに注意が必要です。
カスタム投稿タイプの登録
functions.phpに記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<?php function add_custom_post_xxxxx() { /*「XXXXX」のラベルの設定 --------------------------------------------------------------------------*/ $xxxxx_labels = array( 'name' => "XXXXX", 'singular_name' => "XXXXX", 'add_new' => "新規追加", 'add_new_item' => "新規XXXXX追加", 'edit_item' => "XXXXXを編集", 'new_item' => "新規XXXXX", 'view_item' => "表示", 'search_items' => "XXXXXを検索", 'not_found' => "見つかりません", 'not_found_in_trash' =>"ゴミ箱にはありません", 'parent_item_colon' => '親', 'menu_name' => 'XXXXX', 'all_items' => 'XXXXX一覧' ); /*「XXXXX」の設定と追加 --------------------------------------------------------------------------*/ $xxxxx_args = array( 'labels' => $xxxxx_labels, 'public' => true, 'publicly_queryable' => true, 'description' => 'XXXXXの一覧。', 'show_ui' => true, 'query_var' => true, 'rewrite' =>array( 'with_front' => false ), 'capability_type' =>'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => 5, 'supports' => array('title','editor','author','thumbnail','excerpt','custom-fields'), 'taxonomies' => array('xxxxxcat' ), 'menu_icon' => 'dashicons-admin-home' ); register_post_type('xxxxx',$xxxxx_args); } add_action('init', 'add_custom_post_xxxxx'); |
カスタム分類の登録
同じく、functions.phpに記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<?php /*======================================================================== XXXXXカテゴリーの追加 ==========================================================================*/ function add_custom_type_xxxxxcat() { /*「XXXXXカテゴリー」のラベルの設定 --------------------------------------------------------------------------*/ $xxxxxcat_labels = array( 'name' => "XXXXXカテゴリー", 'singular_name' => "XXXXXカテゴリー", 'search_items' => "XXXXXカテゴリーを検索", 'all_items' => "すべてのXXXXXカテゴリー", 'parent_item' => "XXXXXカテゴリー", 'parent_item_colon' => "親:", 'edit_item' => "XXXXXカテゴリーを編集", 'update_item' => "XXXXXカテゴリーを更新", 'add_new_item' => "新規XXXXXカテゴリー", 'new_item_name' => "新規XXXXXカテゴリー名", 'menu_name' => "XXXXXカテゴリー", ); /*「XXXXXカテゴリー」の設定・追加 --------------------------------------------------------------------------*/ register_taxonomy( 'xxxxxcat', array( 'xxxxx' ), array( 'hierarchical' => true, 'labels' => $xxxxxcat_labels, 'description' => 'XXXXXの分類。', 'show_ui' => true, 'query_var' => true, 'rewrite' => true, 'capabilities' => array('assign_terms' => 'manage_categories' ), 'rewrite' =>array( 'with_front' => false ), ) ); } add_action('init', 'add_custom_type_xxxxxcat'); |
コメントを残す