WordPressでダッシュボードや記事、固定ページの投稿画面にウィジェットを追加する方法紹介

シェアする



どうもIT大好きFwwwです!

最近Wordpressが自由度高すぎて限界が全然見えなくなりました笑

なぜならググれば大概の情報が出て来るからです!!

それにWordpress側がたくさんの関数を提供してくれているのもありますね。

今回は僕自身ググっても詳しく解説されているサイトが無かったので紹介させていただきます。

この記事ではダッシュボードや記事、固定ページの投稿画面に任意のウィジェットを追加できる方法を紹介します。

ライターなどのユーザーが複数居るサイトでは、記事投稿画面に注意書きやTo Do Listという形で設置すると便利が良さそうです。

今回表示させるウィジェットにはHTMLタグが使用可能なので、幅広い使い方ができそうです。

※この記事ではfunctions.phpを編集します。

コードの記述ミスにより管理画面にアクセスできなくなる場合がございますので、FTPで元のfunctions.phpを予めダウンロードしておきエラーが出た際は直ちに上書き復旧というやり方をおすすめします。

ですので、なるべくテスト環境で行ってください。

また、いかなる場合があってもこちらは責任を取れませんことを予めご了承ください

スポンサーリンク

ダッシュボードや投稿画面、固定ページ画面にウィジェットを追加しよう

add_meta_box関数について

先程述べたようにWordpressではさまざまな関数が用意されています。

今回紹介するプラグインもWordpress 2.3以降で用意されている関数です。

ではでは本題に入っていきましょう!

今回大活躍する関数がadd_meta_boxです。

この関数はダッシュボードや投稿画面、固定ページの投稿画面以外にも、

普段お目にかかることが少ないリンク、カスタム投稿タイプのページにもウィジェットを追加することができます。

また、このadd_meta_box関数には$priorityというパラメーターが用意されていて、

ウィジェットの表示位置をhighcoredefaultlowなどで決めることが出来るのですが、

挿入したあとにユーザーが任意にD&Dすれば位置変更ができるため割愛させていただきます

サンプルコードで実際にウィジェットを表示させよう

上記のようなことを言われてもよくわからない方がほとんどだと思うので、まずはサンプルコードをfunctions.phpに貼ってください。

上記のサンプルコードを記述後にダッシュボードと記事投稿画面に次のようなウィジェットが表示されたら成功です

カスタムウィジェット サンプル

次はあなたが上記コードをカスタマイズして任意の文字列を表示させる方法を紹介していきます。

サンプルコードを編集して任意の文字列を表示させよう

$id

add_meta_box

$idで宣言しているhogehogeはHTMLのIDとなる部分なので、CSSなどを駆使すれば独自スタイルが実現できます

要するにHTML上では、

<div id=”hogehoge” class=”postbox “>

となっているということです。

CSSを使用してスタイルを変更しないのであれば後述する、

$callbackと同じにしても良いと思います

$title

add_meta_box

この$titleはウィジェットを表示させた際のタイトルになる役割を担っています。

先程表示させたサンプルコードで言うと下記の場所に付ける名前となります。

$title

$callback

add_meta_box

この$callbackでは、宣言後に使用するための関数の名前を決定します。

この$callbackは先ほどのサンプルコードで言うと、下記の場所で使われている関数です。

$callback

サンプルコードではmemoとなっていますが、

あなたがわかりやすいように任意の文字列にしてください。

※$callbackにはハイフンを使うことができないので、

代わりとしてアンダーバーを使用してください。

$screen

add_meta_box

この$screenではこのウィジェットをどのページに表示させるのか宣言することができます。

この値を、

postにすれば記事投稿画面に、

pageにすれば固定ページ投稿画面に、

dashboardにすればダッシュボードに、

linkにすればリンクページに、

custom_post_typeにすればカスタム投稿タイプページに、

commentにすればコメントページに、

ウィジェットを表示させることができます。

この$screenは一度に複数宣言できないのでサンプルコードでは、

2行にわたってpostとdashboardを宣言して記事投稿画面とダッシュ

ボードに表示させるようになっています。

$screen

$context

add_meta_box

$contextはページ内でウィジェットをどこに表示させるか宣言しています。

上記の他にも、normalとadvancedを宣言できますが、、

基本sideで問題ないです。

echo “ここに任意の文字列を挿入”;

echoとはPHPで文字列や変数などを出力する言語構造というものです。

タイトルのとおり

echo “ここに任意の文字列を挿入”;

「ここに任意の文字列を挿入」の場所に文字を入力すれば、

サンプルのように「あいうえお」と表示させることができます

PHP echo

echoを使った高度な技でHTMLを出力させよう

ここまでで紹介してきた要素で自分なりにカスタマイズは可能です。

しかし、このechoではHTMLを出力させることができるので、

文字の色や太さを変更したり任意のリンクを挿入したりと便利です。

※HTMLタグについての説明は割愛させていただきます。

サンプルコードと出力結果、注意事項を述べておきますのでそれらを参考にカスタマイズを行ってください。

サンプルコード

出力結果

echo 出力結果

注意事項

上記のサンプルコードを見ていただいたら分かるのですが、

このaタグでは<a href=”リンク”>としたいところを、<a href=\”リンク\”>としています

※環境によっては円マークがバックスラッシュとなる場合がありますが問題ないです。

こうする理由は、echoで出力させる文字列を「”」と「”」で囲っているからです。

要するに「echo” ”;」←こうゆうことです

外側を「”」で囲っていますからaタグでも同じようにリンクを「”」で囲ってしまうと入れ子になってしまいます。

それを避けるために「”」の前に「\」を記述する必要があります。

ですからリンクを「\”」と「\”」で囲むという子です

同じようにspan要素にスタイルを付与するのに、

「”」と「”」で過去見たいところですがここでも

「\”」と「\”」で囲む必要があります。

また、入れ子となってしまう問題を次のように解決することも可能です。

echoの引用符を「’」にして、HTMLで使用する引用符を「”」に統一することです。

ですから先ほどのサンプルコードの文字列を出力する部分はこのようにもできます。

人によって書きやすい、読みやすいが違うので何とも言えませんが、

こちらの方がすっきりして見えますね!!

スポンサーリンク

まとめ

ここまで管理画面の各ページにウィジェットを挿入する方法やechoで高度な技を使ってHTMLタグを出力させることに成功したと思います。

<br>で改行させても行間が狭かったので、$idで宣言したidを使ってcssでline-heightを調整すると作業がはかどると思います

最後まで読んでいただきありがとうございましたm(_)m

スポンサーリンク

シェアする



オススメ記事