WordPressの使い方

WordPressでカスタム投稿タイプを作成する方法

今回はWordPressでカスタム投稿タイプを作成する方法、投稿タイプを複数用意する方法についてご紹介していきたいと思います。

基本的にWordPressというと一般的には「投稿」とあとは「固定ページ」という2つの投稿タイプしかありません。WordPressテーマによっては「案件」という投稿タイプも用意されているんですけど、基本的には「投稿」と「固定ページ」だけになっています。人によっては仕事のプロジェクトとか、あとはポートフォリオとか、そういう投稿タイプを用意したいという方、いらっしゃると思います。

今回は有料になってしまうんですけど、有料のプラグインを導入して、カスタム投稿タイプ、投稿タイプを新しく新規追加する方法をご紹介していきたいと思います。

今回使用していくのはJetEngineというCROCO blockというサイトで販売されているプラグインです。年間契約だと26ドルかかるんですけど、このプラグインを導入することによって非常に簡単に投稿タイプが用意できますので、興味がある方は是非参考にしてみてください。

ではまずはツールの契約からやっていきたいと思います。

Step1. Croco BlockでJetEngineを契約する

「kohsukenemoto.com/cb-link」で検索してみてください。そうしましたらCroco blockの公式サイトに移動してきますので、左上の「Products」を開いていただいて「JetEngine」に移動します。そしてこのJetEngineの販売ページの購入ボタンをクリックしてください。一番下までスクロールされます。

今回は単体で契約をしていきますので、他にもプランがあるんですけど、単体で契約をしていきますので、左ですね。「Buy Now」でショッピングカードに移動してきて「Checkout」あとはメールアドレスや名前と電話番号を記入して次のステップに移動していきます。

入力が終わりましたら、一番下にチェックを入れて「Next Step」です。

そうしましたら次は決済手段ですね。Paypalもしくはクレジットカードで払うことができますので、好きな方を選択してください。クレジットカードの場合は下の方ですね。「Pay by Card」このボタンをクリックして次のページに移動します。こちらで「Card number」クレジットカードの番号、それから有効期限の月と年、最後にCVCコードを入力して「Subscribe」してください。

Step2. Croco Blockのアカウントにログインしプラグインをダウンロードする

では次にログインをしていきたいと思います。

購入が終わりますと、自動的にもしかしたらログインされた状態になってるかもしれないですけど、まだログインできていない方はCROCO blockの「Sign in」をクリックして、この画面を開いてください。ユーザー名とパスワードに関しては、こちらですね。CROCO blockから「[Crocoblock Account]」というメールが届きますので、こちらの「Username」それから「Password」を確認してコピーしてきて、入力をしてログインしてください。

このアカウントページで、まずはプラグインのダウンロードですね。この場合はすでに全部のプラグインを契約してるんですけど、「JetEngine」を探していただいて、「Download」します。ダウンロードが終わりましたら、いよいよWordPressにインストールをして設定をしていきたいと思います。

Step3. JetEngineをWordPressにインストールする

次にWordPressにログインしていただいて、「プラグイン」の「新規追加」に移動します。そして今回の場合は「プラグインのアップロード」ですね。検索ではなくて「プラグインアップロード」をクリックして「ファイルを選択」します。そうしましたらJetEngineですね。今ダウンロードしてきたファイルを選択して開く。これは解凍せずにzip形式のままアップロードしてください。そして「今すぐインストール」で「有効化」してください。これで有効化が終わりました。

Step4. JetEngineを有効化する

では次にライセンスの有効化というのをやっていきたいと思います。

インストールしただけだと使うことはできませんので、ライセンスコードを入力して実際に使えるような状態にしていきたいと思います。まずは「Crocoblock」の「Licence」に移動します。そうしましたらポップアップが表示されますので、こちらの「+ Add New License」というボタンをクリックして、こちらにそのライセンスコードを入力していきます。

そのライセンスコードはどこにあるかというと、もう一度Crocoblockのアカウントページに移動します。そうしましたらこちらの契約したものの「View details」をクリックしてください。JetEngineの「View details」ですね。そうしますと「Licence Key」というのが表示されます。僕の場合は「Crocoblock Membership」になってるんですけど、JetEngineの契約したものの「View Details」をクリックして、ライセンスキーを表示します。

そうしましたらもう一度WordPressに戻ってコードを入力して、「Activate License」してください。これでライセンスの有効化が終わりました。

Step5. JetEngineでカスタム投稿タイプを作成する

ではいよいよ実際にJetEngineが使えるようなりましたので、カスタム投稿タイプ、新しい投稿タイプを用意して設定をしていきたいと思います。現時点で「投稿」と「固定ページ」は用意されているんですけど、これらの他にポートフォリオというのを用意していきたいと思います。

まずはこのタブの一番下の方ですね。「JetEngine」というのがありますので、こちらの「Post Types」に移動します。「Add New」で新しく追加します。まず「General Settings」の「Post Type Name」ここでは「ポートフォリオ」とか、好きな投稿タイプの名前を入力します。

次が「Post Type Slug」ですね。ここは日本語ではなくて英語にしておきます。日本語でも設定できるんですけど、基本的に英語にしておいた方がいいので、英語に切り替えて、次ですね。

ちょっとスクロールをして「Advanced Settings」を開いてください。こちらの結構スクロールをしていただくんですけど、「Hierarchical」ですね。ここをオンに切り替えて、さらに「Supports」の部分ですね。デフォルトだと「Title」と「Editor」これら2つしかサポートされておらず、アイキャッチ画像などが設定できないんですね。なので、このフィールドからクリックをして、フィールドから「Thumbnail」あとは必要があれば「Excerpt」これは簡単なまとめの文章というか、短めの文章ですね。それも設定したいという方は「Excerpt」も導入しておいてください。

ではここまで設定できましたら、「Add Post Type」このボタンをクリックすると、今回の場合コメントの下にこのような感じで表示されました。マウスカーソルを置いていただくと、「ポートフォリオ」と「新規追加」だけ。通常の「投稿」であれば「カテゴリー」もあるんですけど、これを追加をするにはどうすれば良いかというと、この「Post Type」ではなくて、今度は「Taxonomies」ですね。「JetEngine」の「Taxonomies」に移動して、カテゴリーを新しく追加します。同じく「Add New」のボタンをクリックして、「Taxonomy Name」というところでカテゴリーを設定します。シンプルに「カテゴリー」でOKです。

次の「Taxonomy Slug」ここでは例えば「portfolio-category」ですね。シンプルなcategoryではなくて、「portfolio-category」のような感じでユニークなスラッグを設定します。

次の「Post Type」では、どの投稿タイプにこのカテゴリを割り振るのかという設定をします。

なので、フィールドから先ほど作成をした「ポートフォリオ」を選択します。これでOKですね。

次は「Labels」を開きます。「Labels」の一番上「Singular name」というところで、ここにも「カテゴリー」という、これは日本語でOKです。日本語で「カテゴリー」とカタカナで入力をして追加をします。これ設定をしないと文言だけなんですけど、「タグ」という文言が設定項目で表示されてしまいますので、「カテゴリー」に変更をして、さらに下の方までスクロールをして、今度「Advanced Settings」を開いてください。こちらの「Hierarchical」ですね。ここをオンに切り替えます。これで右上のボタンをクリックして追加してください。

そうしますと「ポートフォリオ」にマウスカーソルを置いていただくと「ポートフォリオ」と「新規追加」それから「カテゴリー」という3つが表示されるはずです。

次に実際にちゃんとページが作成できるのかというのを確認していきたいと思います。

併せて、カテゴリーも新規作成できるのか、新規追加できるのかというのを確認していきたいと思います。

ではまずはカテゴリーの設定からやっていきましょう。「カテゴリー」に移動していただいて、名前を付けます。「カテゴリー」で「スラッグ」は例えば「category1」ですね。英語で記入します。スラッグの場合は英語にして「新規カテゴリーを追加」します。そうしますと、通常のこの投稿タイプと同じような感じで、カテゴリーが追加できました。

では次はページの作成ですね。「ポートフォリオ」でも「新規追加」でもどちらでもOKなので、ボタンをクリックするかタブに移動するかして、新しく作成します。あとは適当でOKなので、画像を挿入したりとか、テキストを入力してみてください。今回はこのような感じで設定をしておきたいと思います。

では作成が終わりましたら、タブを今「ブロック」が選択されていると思うので、これを「ポートフォリオ」に切り替えて、あと「パーマリンク」の設定と「カテゴリー」の選択それから「アイキャッチ画像」ですね。この3つを設定して公開したいと思います。

まず「スラッグ」ですね。次に「カテゴリー」を選択します。先ほど作成した「カテゴリー1」選んで、あと最後に「アイキャッチ画像」を選択して「公開」をしてみましょう。

そうしましたら、「プレビュー」をしてページを確認します。そうしますと通常のページと同じようにちゃんと表示されていますね。ということでこれでカスタム投稿タイプの追加は以上になるんですけど、この新しく作成をした投稿タイプ、どのようにして記事一覧として表示をするのかというの最後にご紹介していきたいと思います。

通常の投稿タイプの場合であればこの下に改行をして「+」ボタンをクリックして、この「最新の投稿」というブロックを追加すれば表示することができます。先ほどのブロックがなかったら検索をして「最新の投稿」ですね。そうすると作成済みのページがこのような感じで、一覧で表示させることができます。

ただし、今回作成した新しい投稿タイプの場合はこれだと設定ができませんので、一旦「更新」を押して、新しくプラグインを導入して表示をしていきたいと思います。そのプラグインは無料で使えますので、費用かかりませんので、ご安心ください。

では左上のWordPressのアイコンをクリックして「プラグイン」の「新規追加」に移動します。そうしましたら「プラグインの検索」というところで「ultimate addons」という風に検索をしてみてください。そうしましたらこちらですね。「Gutenberg Blocks – Ultimate Addons for Gutenberg」というのがありますので、これを「今すぐインストール」して「有効化」していきます。作者が「Brainstorm Force」になってますね。これを「今すぐインストール」して「有効化」していきます。このページが表示されましたら、インストールが完了しました。

では固定ページを使って先ほど作成したポートフォリオページを一覧で表示していきたいと思います。「固定ページ」の「新規追加」をクリックして、適当に名前を付けます。

「テスト」にして「+」ボタンをクリックで、「すべて表示」します。そうしますと結構下の方なんですけど、今インストールをした「ULTIMATE ADDONS BLOCKS」が表示されます。

こちらの「Post Grid」ですね。もしくは「Post Masonry」でも良いんですけど、どちらかを使うことによって記事を一覧で表示することができます。これは通常の投稿タイプでも先ほど作成した新しい投稿タイプでも、どちらでも適用できます。

あと「Post Carousel」これはスライダー形式ですね。この3つ使えますので、どれでもOKなので、追加をしてください。今回は「Post Grid」を使います。

そうしましたら、右のところ「ブロック」というところに「Post Type」を選択する項目があります。こちらのドロップダウンから「ポートフォリオ」が選択できます。先ほど作成したものですね。こんな感じで、こちらのシンプルなポートフォリオは先ほど動画外で作成したものなんですけど、こんな感じポートフォリオが一覧で表示することができます。このプラグインをインストールしないと、デフォルトだとこの記事一覧が表示できませんので、新しい投稿タイプで作成した記事を一覧で表示したいという方はこのプラグインを導入してみてください。

あと基本的な設定に関してはその下で順番の並び替えとか、あとはカラムの数ですね。2カラムにしたり、「Read More Link」これを開くとこの「Read More」というテキスト、これを「続きを読む」とかに切り替えることができます。

あとは「Button Colors」というところでこのボタンの色ですね。「Color」はテキストの色なんですけど、「Background Color」で背景の色をこのような感じで変更したりとか、いろいろ設定項目がありますので、記事を一覧で表示したい方は是非参考にしてみてください。

では下書きを一応保存してプレビューしてみたいと思います。そうしますとこのような感じで、ちゃんと一覧で表示されてますね。「続きを読む」をクリックすると各記事に移動して、ページがちゃんと表示されました。

ということで今回は「JetEngine」という有料のプラグインなんですけど、それを導入して新しい投稿タイプを追加して、設定する方法をご紹介してきました。通常のデフォルトで備わっている投稿タイプと、あとは固定ページ以外に何か新しい投稿タイプを作成したい方は是非参考にしてみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です