初めまして利用者Oです。

私はアルファサービスでWEB制作作業全般に携わっています。

今回は、近日アルファサービスHPに追加されるカスタムニュースについてお話ししようと思います。

機能新実装

2024年８月某日、所長から「職員や、利用者に向けたお知らせ機能がHPに欲しいのだけれど・・・」と、ご相談がありました。なるほど！合点承知！という事で早速着手！

だいたいこんな感じでいいかな・・・？

なんとなく流行りに乗って丸角にして、薄いグラデかけて～♪いい感じ～！

改良

ふぅ、満足満足！

あ、あれ！？今までどれだけこんな感じのヤツを作ってきただろう・・・とふと脳裏をよぎります！

この機能、正直だいたいどんなサイトでも使いますし、なんならWordpressには専用のプラグインがあります・・・

い、いけない！正直サイト作る度にこんな事していたら時間が無限にかかります！（かかりません）

改良だあああああ！

全体設計

まずは、設計から行きましょう。必要な要件を考えていきます。最終的にやりたい事は、「何度もニュース欄みたいなものを１からコーディングしたくない！けどカスタムもしたい！！」という二律背反。でも、それを解決するのがエンジニアだ！！

要件

• 再利用が可能
• 移植が容易
• カスタムが簡単
• 手入れが簡単
• 既存システムに影響しない

くらいでしょうか！

設計

だいぶんざっくりしていますが、この要件を元に設計していきます。

再利用が可能　→　ショートコードで実装する事で使いまわしを簡単にしよう！サイトによっては何個も設置するしね！

移植が容易　→　こちらもショートコード化することで他サイトでもコピペできるようにしましょう！また、後述のカスタムフィールドの件もあるのでカスタムフィールドをプラグインを使わず実装しよう！

カスタムが簡単　→　ショートコードに引数を持たせて、参照する記事の種類、件数、文字数、クラスなど毎回作る度に調整するものを呼び出し側で解決しよう！！

手入れが簡単　→　運用でわかりにくいと運用者も技術者も大変だ・・・という事でこちらはカスタム投稿で実装してわかりやすく使ってもらおう！

既存システムに影響しない　→　既存システムに影響するようにやっちゃうと、HPが変更された時や運用で大変だ・・・こちらもカスタム投稿を実装して解決しよう！

という事でやっていこうかな！

実装

ということで実装します。設計よりやることは

• 引数付きショートコードでカスタム投稿のニュースフィールドを出力する
• カスタム投稿をプラグインではなく１から実装する

といったところでしょう！

引数付きショートコードでカスタム投稿のニュースフィールドを出力する

引数付きのショートコードを作成します。

引数は

post_typeに投稿ポスト名、posts_per_pageに取得件数、class_nameには使いたいクラス名、title_strlengthに表示するタイトルの文字数、content_strlengthに表示する本文の文字数

といった感じ。実際に使用すると

こんな感じ！

これで、毎回PHPやプラグインに悩まされずにサクッと実装できます！やったぁ！！

カスタム投稿をプラグインではなく１から実装する

カスタム投稿の実装は「Custom Post Type UI」というもので設定をポチポチとすればとても簡単に実装ができます。

しかし！！こちら、ポチポチと実装すると担当者が変わったり引っ越したりする際に「同じようにポチポチする」必要があります！正直気がめいります！！

という事で今回は１から実装しました。これでコピペで移植ができます！！やったぜ！！

こんな感じでダッシュボードに新しくカスタム投稿が追加されます。（ここでは「施設のおしらせ」）

「施設のお知らせ」をクリックすると普通の「投稿」のように一覧が表示され

通常の投稿の様に記事が作成できます

完成

やりました！これで、好きなカスタム投稿を好きな見た目で簡単に出力できるようになりました！クラス名が指定できるので他にもカード型等自由にカスタマイズ可能です！

アルファサービスWEB制作チームでは、この様なちょっとしたWEB制作から、現在Wordpressのオリジナルテーマも作成中です。WEB制作に興味があるな～、Wordpressをもっと知りたいな～みたいな方がいらっしゃいましたら、是非見学に来てくださいね！