Umi Blog

ウミブログ

Drupalで新着情報機能を作ろう!(前編)※画像多め

2014.05.20
Studio Umi

こんにちは。

スタジオ・ウミでも実際にやってる新着情報機能の作り方をご紹介します。
今回の新着情報機能は全部ブラウザから作成ができますのでDrupal始めたての方でも簡単に行えます。多分。
意味のわからない単語がでてきても大丈夫です!私もわかってないところだらけです!
頭じゃなく体で覚えたらOKです*'v')b
でも基本的な単語はこちらの記事で大体はおさえてますので良ければどうぞ。

今回の仕様

新着情報の要件

  • 投稿者の情報と投稿時間を表示する
  • 1つの記事に対して画像が1枚添付できる
  • 画像はラベル無しで本文の上に表示する
  • 新着情報一覧ページには投稿日と記事タイトル(記事へのリンク付き)を表示する
  • 新着情報一覧ページ以外のサイドバーに新着情報一覧ブロックを追加する

前提条件とか今回の作業環境

  • 環境
    • OS:Mac OSX + サーバ:Apache + DB:MySQL5.6.16 + PHP5.4.24
    • 日本語をデフォルト言語に設定済み
    • Localization update(l10n_update)モジュールで日本語化済み
    • Drupalインストール時のタイプ(profile):standard
    • 管理用のテーマとして「seven」を設定済み
  • 既にインストールされて有効になっている寄与モジュール
    • Chaos tools (ctools)
    • Views (views)
    • Views UI (views_ui)

モジュールのダウンロードやインストールの方法はこちらの記事へどうぞ!

必須モジュール(コアモジュールを含む)

このコアモジュールのリストはstandardでDrupalをインストールしたら自動的に有効化されますが念のため記述します。

  • コアモジュール
    • Block (block)
    • Comment (comment)
    • Contextual links (contextual)
    • Field (field)
    • Field SQL storage (field_sql_storage)
    • Field UI (field_ui)
    • File (file)
    • Filter (filter)
    • Image (image)
    • Node (node)
    • System (system)
    • Text (text)
  • 寄与モジュール
    • Chaos tools (ctools)
    • Views (views)
    • Views UI (views_ui)

作りはじめるよ!

まずはコンテンツタイプを作成

ホーム » 管理 » サイト構築 にアクセス!
パス

http://webサイトのアドレス/#overlay=admin/structure/types
http://webサイトのアドレス/admin/structure/types

コンテンツタイプの追加をクリックします。

コンテンツタイプ一覧でコンテンツタイプの追加をクリックする画面

コンテンツタイプの作成画面が出てくるのでまずは名前から入れましょう。
名前を入力し始めると右横に システム内部名称 ってのが出てくるのでそいつも記入します。わかりやすい名前をつけておくと後で幸せになれると思います。

コンテンツタイプの名前とシステム内部名称を入力する画面

その他の項目も記入しちゃいます。今回入力+編集したのは以下の通り。

項目記入内容
名前新着情報
システム内部名称news
説明新着情報の登録が行えます。
投稿フォームの設定
タイトルフィールドのラベル
タイトル
コメントの設定
新しいコンテンツ作成時のデフォルトのコメント設定
非表示
新着情報コンテンツタイプの投稿フォームとコメントの設定

新着情報コンテンツタイプを保存した後の一覧画面

保存をクリックしたらコンテンツタイプが作成できました!

画像フィールドを追加しよう

コンテンツタイプの生まれたての状態は本文とタイトルの入力フォーム+αのみです。
(+αというのは投稿時間の設定や投稿者の情報や掲載・非掲載の選択などです)
デフォルトの状態では残念ながら画像添付用のフィールドはありません。なのでフィールドを作ります。
画像では続けて作業を行っています。

作成した新着情報のコンテンツタイプの右側にある フィールドの管理 をクリック!

コンテンツタイプ一覧のフィールドの管理リンクを示した図

フィールドのラベルとシステム内部名称のにわかりやすい名前を入力したら、フィールドの選択を行います。画像フィールドを選んでください。
画像通りに変わったら保存をクリックします。

画像フィールドを選んでフィールドを追加する画面

・・・と、怒られてしまいました。Articleのコンテンツタイプ内で既にfield_imageは作成済みだったようです。
field名はimageが良いので同じフィールドを使っちゃいましょう。
さっき入力したデータは全て削除&元に戻して、 既存のフィールドを追加 の - 存在するフィールドから選択 から field_image のやつを選択します。そうしたら色々自動で追加されるのでラベルだけちょっと変更して保存します。

存在するフィールドから field_image を選ぶ画面

・・・どうやら今度は上手くいったようですね!上手くいったらこんな画面に出会えるはずです。

画像フィールドの追加が成功した画面

ファイルディレクトリーと最大画像解像度と最大アップロードサイズだけ入力して、他はそのままで保存します。
画像フィールドのディレクトリーと解像度の設定画面

画像フィールドの設定が保存できたら次は表示の管理を行います。
右上の 表示設定 をクリックします。

表示設定のリンクを示した図

画像は本文(Body)の上に表示したいので左の十字になってるアイコンをドラッグ&ドロップして上に持ってきます。あとラベルは別に表示されなくていいので<非表示>に設定します。

画像を本文の上へ並べ替えてラベルを非表示にした表示設定

これで画像フィールドの設定は完了です!

次は実際に記事を更新してみましょうヽ(・∀・)ノ

新着情報の記事をつくる

ホーム » コンテンツ » コンテンツの追加 にアクセス!
パス

http://webサイトのアドレス/#overlay=node/add
http://webサイトのアドレス/node/add

「新着情報」って項目があるのでそれをクリックします。

コンテンツ追加メニューに新着情報が並んだ画面

それぞれの項目を入力していきます。(画像がなんかおかしいのは気にしないでください)
ちなみにここのアドレスの最後、「news」になってますよね?最初のコンテンツタイプ作成時に設定した「システム内部名称」がここに使われています。変な名前つけるよりわかりやすいですよね(´▽`)

URL にシステム内部名称の news が使われていることを示した図

記事が完成☆

完成した新着情報の記事ページ

いい感じにできてますな!

これで新着情報機能は完成しました、が!
Viewsモジュール使ってないです。
次回のブログではViewsモジュールを使って新着情報機能にさらに磨きをかけましょう!
具体的に言うと記事を更新する度に更新される一覧ページや一覧ブロックを作成します。お楽しみに!

\

小さなご意見も、私たちにとっては大きなヒントです!

ぜひ率直なご感想をお寄せください

/

この記事はお役に立ちましたか?

スタジオ・ウミのメンバー

Masters of Drupal Engineering.

人に、技術に、品質に、まっすぐ。

Download
会社案内をダウンロード
Contact
お気軽にお問い合わせください
Recruit
スタジオ・ウミの採用情報