WordPress プラグイン作成

9

概要

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


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

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


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

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

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

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

事実 WordPressには、最新の記事のリストを表示してくれる「最新記事」のウィジェットが組み込まれています。 記事数程度割り当てることができるシンプルな機能を提供していますが、必要に応じてデフォルトの「最新記事」のウィジェットを修正して使用することも可能になります。 または、 最近の投稿ウィジェット拡張のようなプラグインを使用すると、より多くの機能を利用することができます。

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

準備する

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

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

WordPress プラグイン作成

私はプラグインにあった 高度な タブを削除して 全般 タブと ヘルプ タブだけを活用することにしました。 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アクションを使用して <HEAD>...</ 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'
),

);

?>

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

おわりに

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

メモ:

9のコメント

  1. Easy Theme Optionsプラグインは6年間の更新がないされていますね。

    他の似たようなプラグインを探してみるのがいいようです。 時間になると、一度見つけなければならね。

  2. ああ..本当に見右に沿って行うことができる程度になりたいですね。ㅜㅜㅜㅜ

    グングムハンゲます。
    WordPressの機能の中の権限を分けることがありませんか。
    その機能を利用して、微権をを与えることはありませんか?
    たとえば、メディアに入って写真を編集したり、消すことができませんが、ページや記事を書いて上げるか、..することができのです。
    Naver 検索してもそのような内容が記載されていないひょっとしてお伺いします。> <
    • こんにちは?

      User Role Editorプラグインを試してみてください。 ( この記事を参照してください。)

      似たような性格のプラグインもありますが(多分したい種類のプラグインではないかもしれないが)、Press Permit Coreプラグインも一度ご確認ください。

      楽しい週末の夜の時間になってください。

      • うわー..もう一度驚きます。!

        ありがとうございます。!
        ところで、個人的な質問なのに..プログラマーであるんですか?
        個人的にはホームページちょっとこすってくれ依頼も受けるんですか?
        もしかしたら次に、価格はある程度面依頼を受諾ハシナヨ?
        こんなところでこんな質問もされるか分からないが、;;
        ひょっとしてお伺いします。
      • こんにちは?

        詳細については、 http://www.thewordcracker.com/support-system/ ページの提出いただければ連絡をいたします。 具体的にどのような修正をご希望のか正確に教えてください。

        もし学生であれば費用が負担になるので、なるべく直接勉強しながらみることをお勧めします。 もちろん努力にかかってますが、若い年齢では、より迅速に習得していないかと思いますね。

      • はい..学生ではないが。直接なければやるようにですね。ㅜ。 笑

        回答ありがとうございます。!
      • 直接挑戦しながら学ぶのもいいようです。
        個人的な考えは、正しくアクセスすると短時間で学ぶことができると考えられますね。
        本を一冊購入して見て、全体的に身につけた後に応用するのも良い方法です。
        多くの方々が本から学ぶことがない感じるが、実際には本の内容を正しく理解して WordPressがどのように動作するかを正しく理解すれば、多くの問題が容易に解決されることができると思います。
        手間下さい。

      • うん! 事実。長い間本も見たが..頭がアンタラくれコードに触れはできません。(笑)

        User Role Editor < - このプラグインは本当にいいですね! ありがとうございます。
        たった一つ。ユーザーがファイルをアップロードすることはできイトドゥェ、ライブラリはない見たらいいのに。そうはダメですね。
        ファイルをアップロードすることができから..同時にライブラリ内の写真まで見ることができますね。ㅜㅜ。
        もっと工夫をしてみましょう。
        ありがとうございます。!
      • こんにちは?
        回答が遅れ申し訳ありません。
        このコメントを今日見ていない。 (おそらく忙しくない見て移ったようです。)
        お問い合わせいただいた内容は、「 管理者以外の者に「メディアを追加」ボタンの表示/非自分のメディアのみを表示する「文が助けになると思われる。

        今、冬が終わり、待っていた春が来ましたね。
        季節の変わり目に健康に注意してください^^

コメントを残す

コメントを入力してください!
名前を入力してください