アイキャッチ画像: デスクの上でパソコンを使用している

こんにちは。プログラマーの山中です。

スタジオ・ウミでも実際にやってる新着情報機能の作り方をご紹介します。
今回の新着情報機能は全部ブラウザから作成ができますので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 のやつを選択します。そうしたら色々自動で追加されるのでラベルだけちょっと変更して保存します。

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

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

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

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

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

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

新着情報の記事をつくる

ホーム » コンテンツ » コンテンツの追加 にアクセス!
パス > http://webサイトのアドレス/#overlay=node/add
> http://webサイトのアドレス/node/add

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

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

記事が完成☆

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

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


共に働く新しい仲間を
募集しています

スタジオ・ウミは「Drupal」に特化したサービスを提供する Drupal のエキスパートチーム。
フルリモート&フレックス制だから、働く場所を選ばず時間の使い方も自由です。
そんなワークライフバランスの整った環境で、当ブログに書かれているような
様々な技術を共に学びながら、Drupalサイト開発に携わってみたい方を募集しています。
まずはお話だけでも大歓迎!ぜひお気軽にご連絡ください。