WordPress プラグイン作成

概要

この記事では、最新の記事一覧を表示するショートコードを作成し、サイドバーのウィジェットに追加することができる簡単な WordPress プラグインを作成する方法を説明します。

※下記で紹介したEasy Theme Optionsプラグインは長い間更新されていないため、もう機能しないようです。 オプションフレームワーク のような無料のプラグインを活用すれば、何もない状態から開始することではなく、少し簡単でしょう。

正しく WordPress テーマやプラグインを開発したい場合 WordPress 公式文書を参照してください。

• Plugin Handbook (プラグインハンドブック) - https://developer.wordpress.org/plugins/
• Developer Documentation (開発者マニュアル) - https://codex.wordpress.org/Developer_Documentation
• Theme 開発(テーマ開発) - https://codex.wordpress.org/Theme_Development

プラグインの開発といえば途方もしにくく思われるかもしれませんいくつかの種類の関数を作る考えると良いです。 この記事のトピックに興味をガジシ方は、おそらく WordPress 関連する関数を作成し応用できる段階ではないかと考えますね。 だからこの記事の一部については、最初 WordPressを触れたり、 WordPress 関数を作成して適用する方法に慣れていない方には難しいことができます。

最終的に上記のような形式で、最新の文がウィジェットの領域に表示されるようにする予定です。 いくつかのパラメータをユーザーが入力するようにプラグインオプションのページも作成するようしてみましょう。

上記のように、管理者ページで 設定>プラグイン オプションメニューをクリックすると、次のようなプラグインのオプションページが表示されます。

プラグインのオプションページでは、可能な限りシンプルに必要な項目のみ優先追加しました。 文並べ替え（orderby）や日付を追加するかどうかを選択できるようにすることができますが、個人的に必要な機能がないので入れませんでした。

事実 WordPressには、最新の記事のリストを表示する「最近の記事」ウィジェットがデフォルトで提供されています。 テキストの数だけを指定できる単純な機能を提供しますが、必要に応じてデフォルトの「最近の投稿」ウィジェットを変更して使用することも可能です。 または、 最近の投稿ウィジェット拡張のようなプラグインを使用すると、より多くの機能を利用することができます。

しかし、直接このようなプラグインを作る場合、達成感を感じることができるでしょう。 この記事では、最新の記事リストのプラグインを選択した理由は、コードが複雑ではないからです。 最新記事関連するコードは、インターネットを介して簡単に見つけることができます。 これらのコードをまとめ、修正して、必要な機能を作成することができます。 そして、様々なプラグインがありますが、心に必ずかかるプラグインは、検索が容易ではないのが現実です。 いくら良いプラグインをインストールしても、ある程度は、CSS作業などを通じて、レイアウトを調整してくれる必要があります。 直接プラグインを作成すると、そのようなレイアウトの自由に調整できるという点が魅力であれば、魅力といえるね。

準備する

プラグインを作成するいくつかの方法があるが、ここでは、 初級 Theme オプションというプラグインを使用して、最新の記事リスト関数を追加し、オプションページを作成しようとします。 このプラグインは、アップデートが中断されてから4年がされたが使用するために別の問題がありません。 このプラグインは、どのような機能をプラグインではなく、ユーザーがテーマのオプションを作成することができるよう、サンプルのオプションフィールドを提供するプラグインです。 もしテーマを製作した後、テーマのオプションを作成する場合は、プラグインを持って応用することができるでしょう。 もちろん、プラグインのオプションも設定することができます。 少し検索をしてみると オプションフレームワークというテーマオプションを作るためのプラグインもありますね。 オプションページを作成する方法の詳細については、 WordPress Codexページで確認することができます。

テストで簡単 Theme Optionsというプラグインを使用してプラグインオプションページを作成しました。 詳しい方法は この記事を参考にしてEasy Theme Optionsプラグインをインストールして オプション ページの場所を 設定 メニューを下に移動させるようにします。 リンクされた記事では、タブを作成する方法についても説明されているが、あえて新しいタブを作らず、既存のタブをそのまま活用しても構わないです。

私はプラグインにあった 高機能 タブを削除して タブと カスタマーサービス タブだけを活用することにしました。 Easy Theme Optionsプラグインをインストールし、ダッシュボードに表示されるオプションページの名前を変更し、パスを設定の下に変更した場合は、本格的に始めましょう。

最新記事プラグイン作成

最新記事を表示コード補完する

まず、最新の記事を表示するコードを完了する必要があります。  WordPress Codexページに記載されている次のようなコードを活用してみましょう。 （注：以下の内容は、すでに関数の作成に慣れているユーザーに適した文章です。このような部分に慣れていない場合は理解するのには時間がかかることがあります。）

<h2>Recent Posts</h2>
<ul>
<?php
$args = array( 'numberposts' => '5' );
$recent_posts = wp_get_recent_posts( $args );
foreach( $recent_posts as $recent ){
echo '<li><a href="' . get_permalink($recent["ID"]) . '">' .   $recent["post_title"].'</a> </li> ';
}
?>
</ul>

上記のコードは、最新の記事5つのタイトルのみを表示します。 ここで、さまざまな引数を収容するようにコードを $args = array('numberposts' => '5'); 部分を次のようなコードに置き換えます。

$args = array( 'posts_per_page'   => '5',
'offset'           => 0,
'category'         => '',
'category_name'    => '',
'orderby'          => 'date',
'order'            => 'DESC',
'suppress_filters' => true  );

各パラメータの詳細については、 ここで確認することができます。 そしてサムネイルの要約（Excerpt）も追加しておよその骨組みを作るようにします（最終版は、以下の部分を参照）。 サムネイルは get_the_post_thumbnail（）、要約は get_the_excerpt（） 関数を使用します。

これに加え、CSS、スクリプトも作成するようにします。

ショートコード作成

これで、上記で作成した最新の記事表示コードをショートコードにする作業を行います。 ショートコードの詳細は「WordPress ショートコード：完全ガイド「記事を参照してください。

そしてサムネイルの場合、さまざまなサイズに対応できるように add_image_size 関数を使用して新しいサムネイルサイズを作成しました。 」WordPress サムネイルのサイズを変更「記事を参考にしてください。

ショートコードと関連コードをEasy Theme Optionsプラグインフォルダ内のPHPファイルに追加するようにします。 CSSの場合 この記事に紹介された方法に応じて、新しいCSSファイルを作成してリンクすることができます。 このとき、CSSファイルを、プラグインフォルダの下に保存されるためパス名は、 plugin_dir_url( __FILE__ )必要があります。

function myplugin_scripts() {
wp_register_style( 'custom-styles',  plugin_dir_url( __FILE__ ) . 'assets/custom.css' );
wp_enqueue_style( 'custom-styles' );
}
add_action( 'wp_enqueue_scripts', 'myplugin_scripts' );

또는 wp_headアクションを使用して ... の間に挿入されるようにすることもできます。

add_action('wp_head','hook_javascript');

function hook_javascript() {

$output="<script> alert('Page is loading...'); </script>";

echo $output;
}
// Source: WordPress Codex

ショートコード（最終ショートコードのサンプルは以下を参照）とCSSが完成された場合これで、ユーザーがプラグインオプション]ページで指定できるオプションを作成する番です。 例えば、表示する記事数やソート順、サムネイルサイズ、要約の長さなどをユーザーがバックエンドから直接指定できるようにオプションを提供することができます。

プラグインのオプションフィールドの作成

プラグインオプションフィールドの作成方法は、テーマオプション/プラグインオプションページを作成する「記事を参考にしてください。 /includes/options.php ファイルの例として示されているテキストタイプのオプションフィールドをコピーして、新しいフィールドを作成することができます。

array(
'label'=> '글 개수',
'desc' => '<br>표시할 글 개수를 지정하세요(기본값: 5).',
'id' => $prefix.'postno',
'value' => '5',
'type' => 'text'
),

このような方法で任意の数のオプションフィールドを作成するようです。

プラグインのオプションフィールドを作成した場合、最新の記事を表示コードでこれらのオプションフィールドを呼び出すように変更するようにします。 例：

$postnumber = (!eto_get_option('eto_postno') ? '5' : eto_get_option('eto_postno'));
$args = array( 'posts_per_page'   => $postnumber,
...

上記のような式で文数のオプションフィールドを呼び出すことができます。

最終的なコード

以上のように、多少複雑に見えるプロセスを介して最新の記事プラグインが完成しました。 しかし、この方法は、他の方法よりも、直感的で、少し研究と容易に基づいて行うことができそうです。 何よりもテーマオプションページを簡単に作成フィールドのオプションフィールドを追加して簡単に呼び出すことができ、コーディングの負担をはるかに少ないことができます。

上記の過程を経て完成した最終的なコードです（CSS部分を除く）。

メインPHPファイル（プラグインのルートフォルダの下に位置）

// ************************************************
// Shortcode for Simple Recent Posts
// ************************************************
function simple_recent_posts() {
// default values
$postnumber = (!eto_get_option('eto_postno') ? '5' : eto_get_option('eto_postno'));
$content = '';

$temp = '';
$args = array( 'posts_per_page'   => $postnumber,
'offset'           => 0,
'category'         => '',
'category_name'    => '',
'orderby'          => 'date',
'order'            => 'DESC',
'include'          => '',
'exclude'          => '',
'meta_key'         => '',
'meta_value'       => '',
'post_type'        => 'post',
'post_mime_type'   => '',
'post_parent'      => '',
'author'    => '',
'post_status'      => 'publish',
'suppress_filters' => true  );
$recent_posts = wp_get_recent_posts( $args );
foreach( $recent_posts as $recent ){
$temp .= '<li>';
if ( has_post_thumbnail($recent["ID"] )) {
$temp .= '<div class="recent_left">' . get_the_post_thumbnail($recent["ID"], 'thumb-recents' ) . "</div>";
}
$temp .= '<a href="' . get_permalink($recent["ID"]) . '"><span class="recent_right"><span class="recent-title">' .   $recent["post_title"].'</span><span class="recent-excerpts">' . get_the_excerpt($recent->ID) . '</span></a></span> </li> ';
}
if(eto_get_option('eto_posttitles')) {
$content = '<h2>' . eto_get_option('eto_posttitles') . '</h2>';
}
$content .= '<div class="recent_wrapper"><ul>' . $temp . '</ul></div>';
return $content;
}
add_shortcode('simpleposts', 'simple_recent_posts');

// Custom Thumbnail Size
function custom_thumbs()
{
$thumbwide = (!eto_get_option('eto_thumbwd') ? '50' : eto_get_option('eto_thumbwd'));
$thumbheight = (!eto_get_option('eto_thumbht') ? '50' : eto_get_option('eto_thumbht'));

add_image_size( 'thumb-recents', $thumbwide, $thumbheight );
}
add_action( 'after_setup_theme', 'custom_thumbs' );

/includes/options.phpファイル

<?php

/* ----------------------------------------
* To retrieve a value use: $eto_options[$prefix.'var']
----------------------------------------- */

$prefix = 'eto_';

$eto_custom_tabs = array(
array(
'label'=> __('General', 'eto'),
'id' => $prefix.'general'
),

);

/* ----------------------------------------
* Options Field Array
----------------------------------------- */

$eto_custom_meta_fields = array(

/* -- TAB 1 -- */
array(
'id' => $prefix.'general', // Use data in $eto_custom_tabs
'type' => 'tab_start'
),

array(
'label'=> '최신 글 목록을 표시하려면 [simpleposts] 숏코드를 사용하십시오.',
'id' => $prefix.'title',
'type' => 'title'
),

array(
'label'=> '위젯 제목',
'desc' => '<br>최신 글 목록의 제목(없는 경우 표시되지 않음)',
'id' => $prefix.'posttitles',
'type' => 'text'
),

array(
'label'=> '글 개수',
'desc' => '<br>표시할 글 개수를 지정하세요(기본값: 5).',
'id' => $prefix.'postno',
'type' => 'text'
),

array(
'label'=> '썸네일 너비',
'desc' => '<br>썸네일의 폭을 숫자(px 없이)로 지정해주세요(기본값: 50px, 최대값: 100px).',
'id' => $prefix.'thumbwd',
'type' => 'text'
),

array(
'label'=> '썸네일 높이',
'desc' => '<br>썸네일의 높이를 숫자(px 없이)로 지정해주세요(기본값: 50px).',
'id' => $prefix.'thumbht',
'type' => 'text'
),

array(
'type' => 'tab_end'
),

);

?>

その後、冒頭の図に示されているレイアウトのプラグインオプションページがダッシュボードに表示され、サイドバーにサムネイルと概要文と一緒に最新のお気に入りリストが表示されます。

最後に、

以上で 初級 Theme オプションというプラグインを使用して、比較的簡単にプラグインオプションページを作成しオプションフィールドを作成し、最新の記事コードに接続する方法を説明しました。 プラグインを使用せずに直接テーマオプションやプラグインのオプションページを作成することもできます。 その中一つ このページの紹介されたコードを利用することができます。 プラグインを使用せずに関数ファイルなどに直接追加して利用することができますが、多少複雑でXNUMXつのフィールドを追加しても多くのコードを作成する必要が面倒があります。

メモ：

• WordPress ショートコード：完全ガイド
• WordPress サムネイルのサイズを変更
• WordPressでjsスクリプトファイルとスタイルシートを正しくロードする方法