Designer Contentアドオンで作成したブロックを修正する(フィールドの追加)

Designer Contentアドオンで作成したブロックを修正する(フィールドの追加)

concrete5のマストアイテム「Designer Content(デザイナーコンテント)

無料で便利なアドオンなので、公式サイトでも使い方が紹介されています。アドオン「Designer Content」の使い方(無料で便利)

しかし、このアドオン、一度ブロックを作成してしまうと、管理画面から修正ができないという難点があります…。

あとから仕様変更になって項目(フィールド)を追加したい時とかよくありますよね。

PHPが苦手な方はブロックを作り直したりされているようですが、すでにいくつもブロックを作ってしまった時にはそれも大変…。

 

今回は、そんなデザイナーコンテントの修正方法についてまとめてみました。意外とやればできるので挑戦してみてね!

*concrete5 5.6系の作業となります。

 

ざっくり手順はこんな感じ。

  1. 追加したいフィールドのブロックを新規に作る
  2. 追加したブロックのファイルの内容を、先に作ってあったブロックに追加(コピペ)する
  3. 管理画面のブロックタイプで、更新ボタンを押す

 

0.元のブロックと、修正後のブロック

今回は、商品紹介のブロックを修正したいと思います。

dc

初めに作ったブロックは「pickup」という名前で作成し、用意したフィールドは

  • テキスト(タイトル)
  • 画像
  • wysiwyg(説明文)

の3つです。

ここに、タイトルの前に「NEW」の表示を追加できるようにしたいと思います。

dc6

1.追加したいフィールドのブロックを新規に作る

「NEW」の表示はドロップダウンメニューを使用してみようと思います。
(実際は、さらに柔軟性を持たせて他の文言に変えたりできるようにテキストフィールドでもいいかもしれませんね)

管理画面からDesigner Contentを表示して、ハンドル、ブロック名、ドロップダウンメニューを設定します。

DC2

今回はadd_fieldというハンドル名のブロックを追加します。

「Make The Block!」を押してブロックを生成します。

生成したブロックのファイル(ソースコード)は、blocks/add_field にあります。

 

 

 

2.追加したブロックのファイルの内容を、先に作ってあったブロックに追加(コピペ)する

デザイナーコンテントを生成すると、6つのファイルが生成されます。

icon.pngは変更しないことにして、それ以外の5つのファイルから必要な内容をコピペしていきます。

add.php

比較すると何も変わったところはありませんね。何もしません。

controller.php

add_fieldブロックの方はあまり記述がありません。

pickupブロックの方は沢山いろいろ書いてありますね。これは画像フィールドやwysiwygの処理などに必要な内容が書かれているのですね。

比較してみると、$btNameと$btTableの値が違いますが、これはブロックの名前ですから、コピペする必要はなさそうです。

他の値は同じですので、このファイルも何もしません。

db.xml

このファイルは、ブロックで使用しているフィールドを定義しています。

add_fieldブロックの方には

がありますね。ドロップダウンメニューのフィールドです。これをコピーしてpickupブロックの方にペーストしましょう。

ペーストする位置は<table>タグの間に入れます。

この時、もし、「name」の値が同じものがあるようでしたら、名前を変更してください。同じ名前は使えません。

edit.php

このファイルは、編集モードでブロックを追加した時に現れる設定画面を生成するファイルです。

add_fieldブロックの方のコードをコピーします。

pickupブロックの、任意の場所にペーストします。設定の順番に合わせて挿入する位置を決めてください。

*db.xmlでフィールドの名前を変えている場合は、このファイルでも同じように名前を変えるのを忘れないように!

view.php

このファイルは、実際のサイト上での見た目を生成するファイルです。

add_fieldブロックの方にはこのように書かれています。

 

1行目は「$field_1_select_value」の値が「1」の時=「NEW」の時、という意味ですね。

2行目にNEWが選択された時の処理を書きます。

3行目は終わりの合図。

2行目の処理の内容は今回はこのように処理してみましょう。

1行目にも追加しましたが、$textという新しい変数を用意して、何も文字が入っていない空の状態を作っておきます。

そして3行目、NEWが選択された時は、「<span>NEW</span>」というHTMLを書くようにしました。spanには別途、テーマにCSSを追加します。

 

これをpickupブロックの方へ持っていきます。

テキスト(タイトル)の表示より前にペーストします。

そして、<h1>タグに$textの内容を書き出すように記述を追加します。

*db.xmlでフィールドの名前を変えている場合は、このファイルでも同じように名前を変えるのを忘れないように!

 

コードのコピペは以上です!!

 

3.管理画面のブロックタイプで、更新ボタンを押す

管理画面から[ブロックタイプ]メニューを開き、「ピックアップ」ブロックを選択すると、ブロックの詳細画面になります。

dc3

右下の「更新」ボタンを押します。

押すと「ブロックタイプが更新されました。データベース構造の変更が適用されました。」と表示が出ます。これでブロックの修正は完了です!

 

さぁ、ブロックの設定を変更してみましょう!

 

DC4

編集モードでブロックを編集すると、一番下に「NEW」の項目が追加されています。

設定を「NEW」にして保存すると、NEWの文字が追加されました!ヤッタネ!

dc5

 

今回はドロップダウンメニューを追加してみましたが、フィールドの種類によって作業が少し異なると思います。

でも、デザイナーコンテントを使ってview.phpなどを編集したことがあれば、意外と簡単にできるんじゃないかなーと思います。

無料で便利なので、より便利に使いこなしてみましょう!