※作成から2年前(921日経過)の記事です。内容が古い可能性があります。この「経過時間表示」ってどうやってつくる?情報が古い記事にアナウンスするを見る技術系ブログだと、デモやサンプルを表示するのにcodepanなどのHTMLやCSSと実際の表示を別々に表示できるサービスを利用しますが、どうにか自力で作成できないかなっと思ったので、カスタムポストとメタボックスを利用したWPプラグインで再現してみました。0からつくるWPプラグインディレクトリ構成プラグインフォルダプラグインファイルスクリプトCSSカスタムポストタイプまずは開発環境で専用のカスタムポストタイプを作ります。UIを利用して作成します。開発環境でプラグインを利用して作成することで余計なプラグインを本番にアップする事を防ぎます。UI作成したポストタイプをエクスポートし、プラグインの.phpに貼り付けます。プラグインを有効にすればカスタムポストが追加されているのが確認できます。プラグインの作法としてのアンインストールプラグインを作る際には飛ぶ鳥跡を濁さずが大切です。アンインストール.phpには投稿した記事をエクスポートして、DBから削除するよう心掛ましょう。クラス化で周りに迷惑かけないようにする関数名を直接ファイルに記載すると、他のプラグインとぶつかったりします。関数はそのプラグイン内で利用するように内包クラス化しましょう。カスタムメタボックス新規作成した記事に、カスタムメタボックスを表示します。先ほど利用したプラグインファイルに、メタボックス追加のプラグインを記載します。JSやCSSなど言語を複数追加する場合は、単純に言語入力欄を繰り返しフールドを作ったり、といくつか方法があります。メタボックスカスタムフィールドの追加する4つの方法。今回は本文にHTML,メタボックスにCSSをいれますのでCSS用の入力欄を追加します。今回はテキストエディタのnameを配列にしてjsとCSSを配列にしますカスタムメタ値をポストメタに追加ポストにカスタムメタの値を登録カスタムポスト用シングルページをつくる表示用のテンプレを作ります。サイト全体の評価を下げないようにヘッダーにはノンインデックスを追加します。配列で追加されたメタ値をループでとりだします。ショートコードカスタムポストで投稿した内容をアイフレームで表示します。id属性にはカスタムポストのスラッグを利用します。法人化してWEB制作受託してます。マークアップ・組み込み・コンサル・ディレクションから運用までインフラ出来ないデザインは主じゃないので名乗るならフロントエンドエンジニア。WEBサービスを作る夢みてます。コメントをキャンセルby次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。法人化してWEB制作受託してます。マークアップ・組み込み・コンサル・ディレクションから運用までインフラ出来ないデザインは主じゃないので名乗るならフロントエンドエンジニア。WEBサービスを作る夢みてます。453view【目的】ランキングページ用のUIデザインを希望。総合評価を月桂樹で囲ったデザイン案の過程で勲章デザインを提示。【対象】女性がメインターゲット。「LIKE」を集めてランキングが上がる。POPULAR「JETPACKの人気の投稿」を拡張して直近7日間の人気の記事を表示しています。(2)WP飽きるまで。法人化してWEB制作受託してます。マークアップ・組み込み・コンサル・ディレクションから運用までインフラ出来ないデザインは主じゃないので名乗るならフロントエンドエンジニア。WEBサービスを作る夢みてます。