LoginSignup
51
57

More than 5 years have passed since last update.

@gatespace(Kazue IGARASHI)in株式会社デジタルキューブ (DigitalCube Co. Ltd. )

WordPress テーマ（プラグイン）開発オレオレsnippet集＋便利なサービス

Last updated at Posted at 2016-07-01

テーマ開発であれば _s あるいは Iemoto を使えばだいぶ工数が減らせる。
ただし、両者とも公式ディレクトリに掲載されるテーマの作成を前提にした構成・コードなので、クエリの改変やサブクエリ、自作ウィジェットなどのコードは入っていない。

普段は開発に Coda 2 を使っていて「クリップ」にコードは詰め込んでいるのでそれを中心に。

条件などはよしなに。

メインクエリ

pre_get_postsとis_main_query
https://codex.wordpress.org/Plugin_API/Action_Reference/pre_get_posts

my-modify-main-query.php
<?php
function modify_main_query( $query ) {
    if ( is_admin() || ! $query->is_main_query() ) // ダッシュボードあるいはメインクエリではない場合は除外
        return;

    if ( $query->is_category() ) {
        $query->set( 'posts_per_page', -1 );
        return;
    }
}
add_action( 'pre_get_posts', 'modify_main_query' );

サブクエリ

WP_Query
https://codex.wordpress.org/Class_Reference/WP_Query

my-wp-query.php
<?php
$args = array(
    'posts_per_page'   => 5,
    'post_type'        => 'post',
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
    while ( $the_query->have_posts() ) {
        $the_query->the_post();
        /* do stuff 
        the_title(), the_permalink() 等使用可
        */
    }
} else {
    // no posts found
}
/* Restore original Post Data */
wp_reset_postdata();

get_posts
https://codex.wordpress.org/Function_Reference/get_posts

my-get-posts.php
<?php
$args = array(
    'posts_per_page'   => 5,
    'offset'           => 0,
    'category'         => '',
    'orderby'          => 'post_date',
    'order'            => 'DESC',
    'include'          => '',
    'exclude'          => '',
    'meta_key'         => '',
    'meta_value'       => '',
    'post_type'        => 'post',
    'post_mime_type'   => '',
    'post_parent'      => '',
    'post_status'      => 'publish',
    'suppress_filters' => true
);
$my_posts = get_posts( $args );
global $post; // テーマファイル内なら書かなくても良い

if ( !empty( $my_posts ) ) {
    foreach ( $my_posts as $post ) {
        setup_postdata( $post );
        /* do stuff 
        the_title(), the_permalink() 等使用可
        */
    }
} else {
    // no posts found
}
/* Restore original Post Data */
wp_reset_postdata();

WordPress に含まれている jQuery を使うときの自作 jQuery コード

  • WordPress に含まれている jQuery は noConflict モード
    • それが嫌でCDNなどの jQuery を使うって方法を見かけるけど WordPress 本体やプラグインで使っているケースが多いので、正直やめたほうがいい。

my-jQuery1.js
jQuery( document ).ready( function( $ ) {
    // $() will work as an alias for jQuery() inside of this function
    // code
} );

あるいは

my-jQuery2.js
(function($){
    // code
})(jQuery);

余談だが WordPress には jQuery 以外のスクリプト（例えば jQuery UI や Masonry）も含まれている。先ほどのリンクを参照。
例えば jQuery UI Tabs を使いたいときは wp_enqueue_script( 'jquery-ui-tabs' ); と書くだけで、必要な JavaScript ファイルを適切な順番で読み込んでくれる。
jQuery UI Tabsの場合は他に、jQuery 本体, jQuery UI Core, jQuery UI Widget。
ただし、css は含まれないのでよしなに。

ウィジェット

my-widget.php
<?php
/**
 * Adds Foo_Widget widget.
 */
class Foo_Widget extends WP_Widget {

    /**
     * Register widget with WordPress.
     */
    function __construct() {
        parent::__construct(
            'foo_widget', // Base ID
            __( 'Widget Title', 'text_domain' ), // Name
            array( 'description' => __( 'A Foo Widget', 'text_domain' ), ) // Args
        );
    }

    /**
     * Front-end display of widget.
     *
     * @see WP_Widget::widget()
     *
     * @param array $args     Widget arguments.
     * @param array $instance Saved values from database.
     */
    public function widget( $args, $instance ) {
        echo $args['before_widget'];
        if ( ! empty( $instance['title'] ) ) {
            echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
        }
        echo __( esc_attr( 'Hello, World!' ), 'text_domain' );
        echo $args['after_widget'];
    }

    /**
     * Back-end widget form.
     *
     * @see WP_Widget::form()
     *
     * @param array $instance Previously saved values from database.
     */
    public function form( $instance ) {
        $title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'New title', 'text_domain' );
        ?>
        <p>
        <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php _e( esc_attr( 'Title:' ) ); ?></label> 
        <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
        </p>
        <?php 
    }

    /**
     * Sanitize widget form values as they are saved.
     *
     * @see WP_Widget::update()
     *
     * @param array $new_instance Values just sent to be saved.
     * @param array $old_instance Previously saved values from database.
     *
     * @return array Updated safe values to be saved.
     */
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';

        return $instance;
    }

} // class Foo_Widget

GenerateWP サービス

GenerateWP

カスタム投稿タイプやタクソノミーなどはこっちで作ったほうが速い。だってパラメーターが多いのだもの。作ったコードも保存しておける。
作れるものは以下（たまに増える）。一部有料（$9/月）の機能は ＊ 印 。見出しは GenerateWP に合わせてある。

管理向け

コンテンツ

コア

デザイン

クエリ

一般的（汎用）

51
57
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
51
57