wordpressのダッシュボードからTwitterライクに更新するウィジェットを作ってみた

2011-09-09(Fri) Software

タイトル通り、Wordpressのダッシュボードウィジェットから、つぶやきみたいに更新をするツールを作ってみました。

こんな感じのです。

  • よく企業サイトでもトップページなどに使われている、最新情報のリストを表示する方法と組み合わせると、簡単な更新ツールとして使えるそう。
  • また、ダッシュボードからTwitterへ投稿するような感じでも使えます。

動作としては、本文とタイトルを同じ文字列にして、(カテゴリをコード内で設定すれば)投稿してくれます。

コードを置いておきます。貼ってあるコードは安全性を考慮していないはずなので、ご注意を。

作りに至った理由

お手伝い先の研究室のサイトデザインを変更することになったときに、研究室での最新情報を1行で更新する、いわゆる「1行更新」を行うのにブログの投稿で行えないかと考えていまして。

まずは標準で備わってるダッシュボード上にあるクイック投稿(QuickPress)を試してみることに。

デフォルトのカテゴリ指定をしておけばそのカテゴリに投稿できるという理想的なウィジェットでしたが、タイトルだけで投稿しようとしたら投稿できない・・・ことが判明しまして。orz

本文とタイトルが同じになるような投稿を叶えてくれそうなプラグインを探してみるものの見つからず。

post.phpに内容を投げるだけ出し、なんとか作れないかとそれらを参考にしてオリジナルで出来ないかと考えだしたところで、(実際はそれでは作れませんでしたが)

理想的な更新方法はTwitterライクかと考えていたので、WordpressのP2テーマを見つけて、それも見ていた所から始めたのがこれです。

機能と動きについて

  • ダッシュボードウィジェットで作ってます
  • タイトルと本文が同じ文字列となるようにする
  • 投稿ボタンを押すと、JSで確認ダイアログを出す
  • これポストしたとわかるようにカテゴリとタグを指定してある。
  • - GUI側からの設定機能は未実装
  • 投稿が成功失敗の通知を出す
  • 成功の場合は、成功した投稿への編集ページのリンクが現れる
  • 投稿自体はフォームの入力した文字列をwp\_insert\_postをそのまま突っ込んでる
  • - のでwp\_insert\_postの仕様に準ずる - htmlタグは受け付けてる。(タイトルにも入るのでお勧めしない。どう改善しようか悩んでる) - 文字数の制限など考えてない。(データベースで設定されてる型より溢れたらどうなるか検証してない)

ソースコード

プラグインとして作らなかったので、テーマのfunction.phpにぶっこんでます。

あまりに整理されてないので見苦しい部分があるかとおもいます、すみません。

\<?php  
function add\_newspost\_meta\_box() {  
?\>  
\<!--widget css --\>  
\<style type="text/css"\>

label-wrap {
============

    float: left;
    width: 4em;
    clear: both;
    text-align : right;
    margin: 4px 0px 2px;

}

newslist-post-wrap {
====================

    margin: 0 0 1em 5em;

}

submit { clear:both;}
=====================

add\_newspost\_meta\_box .info\_area {
======================================

    padding: 6px;
    border: 1px solid;
    border-color: #E6DB55;
    box-radius : 3px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;

}

add\_newspost\_meta\_box \#submitted\_info {
============================================

    background-color:lightYellow;

}

add\_newspost\_meta\_box \#error\_info {
========================================

    background-color:lightYellow;

}

newslist-post-wrap \#newslist\_content{
=======================================

    font-size : 18px;
    width:80%;
    margin: 0;
    padding: 0;

}  
\</style\>

\<?php  
if (\$\_POST){

    }

    if ( 'post' === strtolower( $_SERVER['REQUEST_METHOD'] ) &amp;&amp; isset($_POST[&quot;newslist_content&quot;]) &amp;&amp; '' != $_POST[&quot;newslist_content&quot;]) {

       //投稿ルーチン
        $post_insert = array(
        'post_title'    =&gt; $_POST[&quot;newslist_content&quot;],
        'post_content'  =&gt; $_POST[&quot;newslist_content&quot;],
        'tags_input'    =&gt; $_POST[&quot;newslist_post_tags&quot;],
        'post_status'   =&gt; $_POST[&quot;newslist_post_status&quot;],
        'post_category' =&gt; array($_POST[&quot;newslist_post_category&quot;]), //TODO:設定で変えれるように
        );

        $add_newslist_status = wp_insert_post( $post_insert );

        ?&gt;&lt;p id=&quot;submitted_info&quot; class=&quot;info_area&quot;&gt;1行更新しました。
        &lt;a id=&quot;frontpage_link&quot; href=&quot;&lt;?php  echo site_url( '/' ); ?&gt;&quot;&gt;サイトトップで確認&lt;/a&gt;  |
        &lt;a id=&quot;edit_post_link&quot; href=&quot;&lt;?php echo get_edit_post_link($add_newslist_status);?&gt;&quot;&gt;1行更新の編集画面&lt;/a&gt;
        &lt;/p&gt;
        &lt;?php

    }elseif( isset($_POST[&quot;newslist_content&quot;]) &amp;&amp; '' == $_POST[&quot;newslist_content&quot;]){
        //文が空の場合
         ?&gt;
            &lt;p id=&quot;error_info&quot; class=&quot;info_area&quot;&gt;投稿に失敗しました。更新文が入力されていません。&lt;/p&gt;
        &lt;?php
    }

    ?&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
    &lt;!--
    //フォームの確認ダイアログ
    // http://www.tagindex.com/javascript/form/submit.html よりほぼ抜粋

    function check(){
        var post_content = document.getElementById(&quot;newslist_content&quot;).value
        if(window.confirm('更新してよろしいですか?\n更新文:' + post_content)){
            return true;
        }
        else{ // 「キャンセル」時の処理
            window.alert('キャンセルされました'); // 警告ダイアログを表示
            return false; // 送信を中止
        }
    }
    // --&gt;
    &lt;/script&gt;
    &lt;?php //フォーム部分 ?&gt;
    &lt;form name=&quot;post&quot; method=&quot;post&quot; action=&quot;&lt;?php echo esc_url( admin_url( 'index.php' ) ); ?&gt;&quot; id=&quot;newslist-post&quot; onSubmit=&quot;return check()&quot;&gt;
        &lt;p id=&quot;init_infomation&quot;&gt;
        1行での更新用ウィジェットです。詳しい内容がある場合は
        &lt;a href=&quot;&lt;?php echo home_url(&quot;/wp-admin/edit.php&quot;); ?&gt;&quot;&gt;投稿機能&lt;/a&gt;をお使いください。
        &lt;/p&gt;
        &lt;div id=&quot;label-wrap&quot;&gt;
            &lt;label for=&quot;newslist_content&quot;&gt;更新文&lt;/label&gt;
        &lt;/div&gt;
        &lt;div id=&quot;newslist-post-wrap&quot;&gt;
            &lt;input type=&quot;text&quot; id=&quot;newslist_content&quot; name=&quot;newslist_content&quot; value=&quot;&quot;&gt;&lt;/input&gt;
        &lt;/div&gt;
        &lt;input type=&quot;hidden&quot; name=&quot;newslist_post_tags&quot; value=&quot;&lt;?php echo &quot;newslist&quot;?&gt;&quot;&gt;
        &lt;input type=&quot;hidden&quot; name=&quot;newslist_post_status&quot; value=&quot;publish&quot;&gt;
        &lt;input type=&quot;hidden&quot; name=&quot;newslist_post_category&quot; value=&quot;0&quot;&gt;&lt;!--カテゴリIDはここに設定--&gt;
        &lt;div id=&quot;submit&quot;&gt;
            &lt;input type=&quot;submit&quot; name=&quot;newslist_publish&quot; class=&quot;button-primary&quot; value=&quot;更新&quot;&gt;
            &lt;input type=&quot;reset&quot; value=&quot;リセット&quot; class=&quot;button&quot;&gt;
        &lt;/div&gt;
    &lt;/form&gt;

\<?php  
}

function add\_newspost\_box() {  
//TODO:編集権限がない場合は表示させない  
\$dashbouad\_title = '新着情報の更新';  
wp\_add\_dashboard\_widget( 'add\_newspost\_meta\_box',
\$dashbouad\_title, 'add\_newspost\_meta\_box');  
}  
add\_action( 'wp\_dashboard\_setup', 'add\_newspost\_box' );  
?\> 

苦労話

PHPで考えたり、Wordpressの関数を使ったりするのは初めてだったので苦労しました。基本文法を調べつつやっていました。フォームとかPHPもよくわかっていないのでドツボにハマったり。

フォーム、POSTメソッドの送信の意味がよくわかってなくて、POSTデータがいつwp_insert_postに使われてるのかがわからなくて数日悩んでたり。これはPHP以前の問題でしたが。

(wp_insert_postの戻り値が使いたかったのでしばらく悩んでました。

フォームのPOSTデータは送信先に送られます。PHPファイルなら、それを受け取り処理することができます。POSTデータの送信先で、POSTデータがある場合にwp_insert_postを実行させれば、送信先で投稿されて、wp_insert_postの値が使えるという至って単純な話を延々と悩んでる話です)

というわけで、やりたいことは出来るようになったところまでで。時間ができたら手直しできたらと。

参考