Drupalチュートリアル


Drupalチュートリアル


このステップバイステップのチュートリアルでは、最新のDrupal CMSを使用してWebサイトを構築する方法を示します.

Drupalは、カスタムのWebサイト、ブログ、ポータルなどを作成するための無料の強力なコンテンツ管理システムです.

完全に機能するWebサイトを構築するために必要なすべての機能を備えています。カスタマイズ可能でスケーラブルで無料で使用できます.

ただし、WordPressを使用して(またはWebサイトビルダーを使用して)Webサイトを作成するほど簡単ではありません。途中でHTMLまたはCSSの基本的な知識があると役立ちます.

Drupalを使用してWebサイトを作成する方法(目次):

    1. ウェブホスティングを入手
    2. Drupalをインストールする(クイックインストールまたは手動)
    3. ユーザーインターフェイスを理解する
    4. Drupalサイトのテーマを変更する
    5. テーマを設定する
    6. 新しいフロントページを作成する
    7. 別のページを作成してメニューに追加する
    8. デフォルトモジュールのアクティブ化と非アクティブ化
    9. 提供されたモジュールを追加する
    10. ブロックに慣れる
    11. 既存のブロックを管理する
    12. カスタムブロックを作成する

Drupalを使用してWebサイトを作成する合計時間: 約3〜4時間
スキルレベル: 中級

1. DrupalサイトをホストするWebホスティングを見つける

あなたがウェブサイトを構築する前に、それが置かれ、別名到達可能な場所が必要です ウェブホスティング.

すでにウェブホスティングをお持ちですか?ステップ2に移動.

ホスティングでは、4つの主要な要素を考慮する必要があります。

  1. 稼働時間 –稼働率は、サイトが稼働している時間を示します。業界標準の99.9%以上の製品を選択することをお勧めします.
  2. ページ読み込み速度 –現在の平均である850ミリ秒より速くロードするホストを選択する必要があります.
  3. 顧客サポート –いつかサポートに関する問題を整理する必要があります。したがって、高品質で迅速なカスタマーサポートを備えたホストを選択することは理にかなっています.
  4. 価格 –ホスティングサービスは価格が大きく異なります。余裕のあるものを選択してください。また、最初の3つの要素について満足のいく評価が得られます。.

完全な開示:このガイドの紹介リンクからBluehostを購入すると、手数料が発生します。これにより、WebsiteSetupを稼働させ、最新の状態に保つことができます。ご協力ありがとうございました.

手頃な価格のウェブホスティングとドメインを ブルーホスト, 私たちがお勧めしている.

Drupalの適切なシステム要件があります( ドキュメンテーション)、サイトをセットアップできないことを心配する必要はありません。また、DrupalとJoomlaの「ワンクリックインストール」機能も備えているため、手動でインストールする必要はありません。.

drupalのWebホスティング

HostGatorやSiteGroundなど、Bluehostに類似した価格の代替品を探すこともできます。.

Bluehostへのサインアップが進まない場合

あなたのウェブサイトに適切なホスティング環境が整ったら、今が始まりです.

2. Drupalをインストールする

Drupal Webサイトをインストールしてセットアップするには、2つの方法があります。.

1つのオプションは、「クイックインストール」を備えたBluehostなどのWebホスティング会社を使用することです。別のオプションは、Drupalを手動でダウンロードしてインストールすることです。両方について説明します。

2a。 Bluehost.comへのDrupalの自動インストール(クイックインストール)

サインアップしてBluehostでドメインを取得したら、アカウントにログインして[詳細]をクリックします.

BH joomlaインストール

次に、下にスクロールして[ポータル/ CMS]をクリックします.

bh drupalインストール1

そこから、Drupalアイコンを探してください.

bh drupal install 4

「今すぐインストール」をクリックします.

bh drupal install 3

そこから、これがあなたが出迎えられるものです。 Bluehostドメインがすでにデフォルト設定に含まれていることがわかります。何をしているかわからない場合は、これらのデフォルト設定をそのままにしておくことをお勧めします.

bh drupal install 4

サイト名を入力したら、「クイックインストール」をクリックします.

bh drupal install 5

これにより、管理者名、パスワード、および管理者の電子メールを入力するように求められます.

bh drupal 6

それが終わったら、「インストール」をクリックするだけです.

そうすると、このメッセージを見つけて驚かれるかもしれません。心配しないでください。これはデフォルトのindex.htmlページです.

bh drupal install 7

チェックボックスをオンにして、もう一度「インストール」をクリックするだけです.

おめでとう! BluehostドメインにDrupalをインストールしました!

bh drupal install 8

2b。 Drupalの手動インストール(すべてのWebホスト)

BluehostまたはDrupalを自動的にインストールするWebホストを使用していない場合は、Drupalを手動で設定できます.

Webホストを取得したら、Drupalのインストールは非常に簡単です。単にに行く 公式サイトのダウンロードセクション 大きな青いボタンを押します.

公式ページからdrupalをダウンロード

ハードドライブに移動したら、ダウンロードしたファイルを解凍します。次に、FTP経由でサーバーに接続します(例: FileZilla)そして、それらすべてのファイルを、ドメインが指しているディレクトリ(通常はルートディレクトリ)にアップロードします。.

これには少し時間がかかります。それまでの間、ホストのMySQLデータベースの管理パネルに移動します。ここでは、Drupalインストール専用のデータベースを作成してください。プロセスはプロバイダーによって多少異なりますが、次のようになります。

  • データベース名
  • データベースのユーザー名
  • そのユーザーのパスワード
  • データベースホストアドレス

この情報をすべて手元に置いておいてください。すぐに必要になります.

ファイルのアップロードが完了したら、サイトドメインに移動します。これにより、Drupalのインストールプロセスが開始されます.

drupalインストール手順1

最初のステップは、サイトで使用する言語を選択することです。選択してクリックします 保存して続行.

drupalインストール手順2

その後、いわゆるインストールプロファイルを決定する必要があります。これにより、サイト機能の一部が事前設定されるかどうかが決まります。ここでの選択は、使用しているDrupalのディストリビューションによって異なる場合があります。もう一度、あなたの選択をして先に進んでください.

このチュートリアルでは、標準プロファイルを使用します。経験が豊富な場合は、最小限のオプションを使用することもできます.

drupalインストール手順3

次のステップでは、Drupalのインストールにより、ご使用の環境がソフトウェアを実行するのに十分かどうかがチェックされます。問題があれば警告として表示されるので、対処することができます。満足したら続けます.

drupalインストール手順4

さて、先ほど収集したデータベース情報を使用する時が来ました。データベース名、ユーザー名、パスワードを入力します。 MySQLホストアドレスが ローカルホスト, 下で変更できます 高度なオプション. 同じ場所で、必要に応じてデータベースプレフィックスを割り当てることもできます(たとえば、1つのデータベースに複数のサイトがある場合)。保存したら、保存して続行します.

その後、実際のインストールが始まります.

drupalインストール手順5

最後のステップは、サイトに関する基本的な情報を設定することです.

drupalインストール手順6

記入方法は次のとおりです.

  • サイト名 –ウェブサイトの名前。これは後で変更することができるので、正しく理解するのに夢中になる必要はありません。.
  • サイトのメールアドレス –ユーザーがサイト通知を受け取るメールアドレス.
  • ユーザー名 –サイトのメイン管理者アカウントのユーザー名.
  • パスワード –アカウントを安全に保つために強力なパスワードを選択し、もう一度確認することを忘れないでください.
  • 電子メールアドレス –メインユーザーに関連付けられたメールアドレス。 Drupalは自動的にサイトのメールアドレスを入力し、必要に応じて変更します.
  • デフォルトの国 –サイトのデフォルトの国.
  • デフォルトのタイムゾーン –サイトが日付や同様の情報を表示するために使用するタイムゾーン.

最後に、サイトで更新を自動的にチェックし、更新がある場合は通知するかどうかを決定する必要があります。満足したら、もう一度保存して、インストールは完了です.

ところで、一部のホスティングプロバイダーは、Drupalのワンクリックインストールオプションを提供しています。この記事で例を見つけることができます。少し下にスクロールするだけで、手順が表示されます。したがって、手動ルートに進む前にホストに確認してください.

3.ユーザーインターフェイスを理解する

インストールプロセスが完了すると、新しく作成したDrupalサイトが自動的に表示されます.

drupalのインストールが完了しました

ログインすると、画面上部に、サイトに変更を加えることができるバックエンドのすべての部分へのリンクが表示されます。以下では、それらの多くを使用しますが、理解のために、それぞれに何が含まれているのかを簡単に説明します。

  • コンテンツ –ここでは、投稿やページなどの基本的なコンテンツを作成できます。また、コメントを処理し、サイトのメディアライブラリを見つけることもできます.
  • 構造 –ここでは、ブロック、フォーム、コンテンツタイプ、メニュー、分類法など、サイトのすべての構造要素を管理します.
  • 外観 –テーマの設定とその他の外観関連オプション、およびサイトの更新が含まれます.
  • 伸ばす –このメニューの下で、Drupalモジュールをインストールおよびアンインストールできます.
  • 構成 –サイト設定へのアクセスを提供します.
  • –ユーザー、ロール、権限レベルのオプションが含まれています.
  • 報告書 –ここでは、ログ、更新情報、ステータスレポート、エラー、検索フレーズ、サイトに関するその他の情報を検索します.
  • 助けて –基本的なサイト管理およびサイトにインストールされているモジュールに関する役立つ情報を提供する中央ハブ.

ちなみに ショートカット, 頻繁に使用する管理インターフェースの部分への独自のリンクを定義できます.

drupalショートカット

このようにして、ワークフローを改善し、より速くすることができます。すべてクリア?次に、この新しい知識を有効に活用しましょう.

4. Drupalサイトのテーマを変更する

下部には、サイトのフロントエンドが表示されます。つまり、訪問者に表示されます。今のところ、それはまだ少しおとなしいので、最初にしたいことは、サイトに付属しているデフォルトのテーマを別のものに変更することです。このオプションは以下にあります 外観 >新しいテーマをインストールする.

羽状の外観メニュー

ただし、他のコンテンツ管理システムとは異なり、Drupalバックエンド内からテーマを見つけることはできません。そのためには、に行く必要があります 公式Drupalテーマディレクトリ, テーマのインストールページの上部にもリンクがあります.

この記事の執筆時点では、2,700を超えるテーマから選択できます。ディレクトリはそれらをフィルタリングするいくつかの方法を提供するので、あなたが探しているものを見つけることができます.

drupalテーマディレクトリ

しかし、あなたはまだ純粋な数に圧倒されるかもしれません。その場合は、ウェブ上にある多くのベストリストの1つから始めるのが良いでしょう。.

テーマを選択するときは、それがあなたの技術的能力のレベルに適合し、心に描いているデザインビジョンを作成でき、モバイルレスポンシブであることを確認してください(最近は必須です)。ディレクトリ内のすべてのテーマにも独自のページがあり、詳細を読んでライブデモを確認できます.

テーマホームページ

適切なものを見つけたら、サイトへのインストールは非常に簡単です。ディレクトリからテーマをダウンロードするか(下部にオプションが表示されます)、ダウンロードリンクを右クリックしてその場所をコピーします.

ディレクトリからdrupalテーマをダウンロード

その後、ファイルまたはURLを使用して、テーマをサイトにアップロードできます.

新しいdrupalテーマをインストールする

その後、まだそれをからインストールする必要があります 外観 タブをクリックしてアクティブにします( デフォルトとして設定 Drupalで).

drupalテーマをインストールしてデフォルトに設定

完了したら、サイトに戻ると(左上隅にボタンがあります)、新しいテーマの動作を確認できます.

新しいdrupalテーマがインストールされました

5.テーマを設定する

新しいテーマをインストールしてアクティブ化すると、そのテーマはリストの上部に表示されます。 外観 メニュー。ほとんどのテーマには、設定オプションが付属しており、 設定 それらの隣にリンクします。または、 設定 上部のタブをクリックして、編集するテーマを選択します.

drupalテーマ設定にアクセスする

どちらもこの画面に移動します.

drupalテーマ設定を構成する

ここでは、テーマが提供する変更を行うことができ、テーマによっては、同時にプレビューすることもできます。これは、カラースキームの変更、ユーザー画像の有効化/無効化、ロゴとファビコンのアップロード、背景の設定、フィルターなど、さまざまです。 Drupalを使用してWebサイトを構築するときは、必ずここにアクセスして、テーマが提供するすべてのものを活用できるようにしてください。.

6.新しいフロントページを作成する

これでサイトの見栄えは良くなりましたが、それでもかなり空です。それを変える時.

まず、フロントページを作成して、ビジターがスイングするときに何かを見られるようにします。そのためには、 コンテンツ>コンテンツを追加>基本ページ. この画面が表示されます:

drupal基本ページエディター

ここでは、基本的なエディターでコンテンツを作成できます。上部には、サイトにも表示されるページタイトルを定義するオプションがあります.

その下に、あなたは言うリンクを見つけます 概要を編集. クリックすると、投稿またはページの概要を提供するオプションが表示されます.

drupalエディターで要約を編集する

これは、サイトの特定の部分に表示される抜粋のようなものです.

その下には、本文テキストを入力してフォーマットするオプションがあります。たとえば、テキストを太字および斜体にしたり、リンクを追加および削除したり、リストを作成したり、引用符を定義したり、画像を挿入したり、ドロップダウンメニューを使用して見出しを定義したりできます。に切り替えると、入力テーブルや水平仕切りなどの追加オプションを使用できます 完全なHTML 底に.

drupalエディターを完全なHTMLに切り替える

ワードプロセッサやその他のコンテンツ管理システムを使用したことがある場合は、すぐに方法を見つけ、必要なコンテンツをまとめることができます。完了したら、下の右側にあることを確認してください URLエイリアス, ページの末尾のスラッグまたはURLを定義します。これは単に次のようなものを入力することで起こります /表紙 フィールドに.

drupalのURLエイリアスを変更する

その後、下部で投稿を保存し、前のボックスが 公開済み チェックされています.

ここまでは順調ですね.

新しいページをフロントページとして定義するには、次に移動する必要があります 構成>システム>基本的なサイト設定. ここでは、 デフォルトのフロントページ, 新しいページに定義したのと同じスラッグを入力します.

drupalに新しいデフォルトのホームページを設定する

これを実行して構成を保存すると、Drupalサイトのフロントページにコンテンツが表示されます。.

完成したdrupalホームページ

次のステップとして、 ページを作成し、メニュー項目として追加します。最初のいくつかのステップは以前と同じです。基本的なページを作成し、コンテンツを追加します(ページに関するキラーを作成する方法を知りたい場合は、 この郵便受け)とスラッグを設定します(例:. /約).

ただし、今回は、公開する前に、 メニュー設定 と言うボックスにチェックを入れます メニューリンクを提供する.

drupalのメニューにページを追加

表示される設定を入力する方法は次のとおりです。

  • メニューリンクのタイトル –これは、ユーザーがナビゲーションメニューに表示するリンクのテキストです。即座に認識できるものにします。この場合 私について 良い選択です.
  • 説明 –メニューリンクの上にマウスを置いたときに表示されるオプションの説明。それは次のように言うことができます 私が提供しなければならないものの詳細をご覧ください.
  • 親アイテム –すでに他のメニュー項目がある場合は、この設定によりサブ項目を作成できます.
  • 重量 –この設定により、メニュー項目の順序を決定できます。数字が大きいほど、前に表示されます.

設定が完了したら、ページを保存します( 公開済み アクティブ)。 Drupalは自動的にフロントエンドに戻り、新しいページと新しいメニュー項目の両方が表示されます。.

drupalのメインメニューにページを追加

しかし、待ってください。メニューの順序が間違っているとどうなりますか?問題ありません。それにカーソルを合わせて、表示されるペンアイコンをクリックするだけです。これにより、選択できるオプションが表示されます 編集メニュー.

フロントエンドからdrupalメニューを編集する

すると、以下の画面が表示されます.

drupalメニュー設定を編集する

ここでは、左側のアイコンを使用して、メニュー項目を目的の順序にドラッグアンドドロップするだけです。変更がサイトに変換されたら保存します。最後のヒント:を使用することもできます リンクを追加 上部のボタンをクリックして、ナビゲーションメニューに手動でページを追加します。また、 構造>メニュー.

8.デフォルトモジュールのアクティブ化と非アクティブ化

了解しました。これで、Drupalを回避する方法の基本を理解できました。これまでにコンテンツ管理システムやWebサイトビルダーを使用したことがある場合は、かなり馴染みがあるはずです。ただし、システムはさらに多くのことができ、あらゆる種類の目的に拡張できます.

そのためには、おそらくモジュールを使用します。前述のように、これらはDrupalサイトにあらゆる種類の機能を追加できる小さなプログラムです。コアソフトウェアには、それらの多くが付属しています。 伸ばす.

デフォルトのdrupalモジュール

すべてのモジュールがデフォルトでインストールされてアクティブになるわけではありません。これを変更するには、ボックスの前にチェックを入れ、下にスクロールして、 インストール. その後、CMSが残りを処理します.

逆に、不要になったモジュールは、 アンインストール タブ.

drupalのデフォルトモジュールをアンインストールする

それは基本的にそれらをインストールするのと同じように機能しますが、逆にのみです。不要な拡張機能をオフにし、下にスクロールしてヒットします アンインストール.

9.提供されたモジュールを追加する

デフォルトのモジュールの他に、他の開発者から入手可能な他の多くのものもあります。あなたのサイトにそれらを追加することは、テーマのインストールのように非常に機能します.

まず、好きなモジュールを 公式ディレクトリ. 1つに決着したら、それをダウンロードするか、その場所をコピーします。次に、それをサイトに追加できます 拡張>新しいモジュールのインストール.

新しいdrupal提供のモジュールをインストールする

テーマ以外にも、42,000以上のモジュールから選択できます。どれがインストールする意味があるかわからない場合は、いくつかの優れたオプションを以下に示します。

  • 管理メニュー –デフォルトのツールバーでは、単一の管理機能にアクセスするためだけに大量のページをロードするのに時間がかかります。スピードアップするために、このモジュールは管理領域全体のクールなドロップダウンメニューを提供します。既存のツールバーをオフにして、アドミニストレーションメニューモジュールをアクティブにするだけです。.
  • トークン –トークンは、プレースホルダーシステムを介して配置されるテキストの小さなセクションです。現時点では、Tokenモジュールの機能の多くはDrupalコアに書き込まれていますが、Pathautoモジュールなど、一部のモジュールではまだそれが必要です。.
  • カオスツールスイート –別名Ctools。独自のモジュール、フォーム、ダイアログボックス、プラグイン可能なコンテンツタイプなどを作成できます.
  • パスオート – Drupalの組み込みのPathモジュールを使用すると、手動でURLを作成できます。これはすべての投稿に対して手動で行うのは面倒であり、Pathautoはその面倒な作業からあなたを解放します。カスタム置換パターンとユーザーアカウントページのパスを割り当てて、URLがSEOとユーザビリティの標準に一致するようにすることができます。覚えておいてください:PathautoにはTokenおよびCtoolsモジュールが必要です.
  • クイックタブ –最近の人気のあるコンテンツを一覧表示する大きなウェブサイトでこれらのクールなタブ付きボックスを見たことがありますか?クイックタブでは、カスタムJavaScriptを記述しなくても、これを簡単に行うことができます。モジュールをインストールして有効にすると、クイックタブの選択が 構造 メニュー.

より便利なDrupalモジュールについては、 この記事.

10.ブロックに慣れる

主要な貢献モジュールを配置したら、さまざまな機能を備えたサイドバーを追加することができます。このようなコンテンツは、ブロックの形で提供されます。これらをさまざまな領域に配置し、外観、形状、サイズ、位置、および表示するWebサイトページを調整できます。.

サイトのテーマ、モジュール、その他のコンポーネントに応じて、さまざまな種類のブロックにアクセスできます。あなたはそれらの下でそれらを管理するためのすべてのオプションを見つけることができます 構造>ブロックレイアウト.

drupalブロックレイアウトメニュー

ブロックはテーマごとに保存されるため、上部に、サイトにインストールされているテーマのリストが表示されます。以下は、ブロックを追加できるすべての場所のリストです。 地域. すべてがどこにあるかわからない場合は、 ブロック領域を示す 頂点で。次に、各ブロック領域がどこにあるかのハイライトとラベルが付いたサイトのビューが表示されます.

垂膜ブロック領域を確認する

どこかに追加するには、目的の領域までスクロールしてクリックします ブロックを配置する. 利用可能なオプションのリストが表示されます.

垂体ブロックを配置する

クリックすると ブロックを配置する あなたがあなたのサイトに望むものの隣に、あなたはそれから設定オプションに行きます.

drupalブロックを構成する

これらは、配置する内容によって若干異なります。この場合、タイトルを追加して(表示するかどうかを決定して)、ブロックの表示を設定できます。たとえば、特定のコンテンツタイプ、特定のページ、またはアクティブなユーザーの役割にのみ表示されるように制限できます。下部で、表示する領域を変更することもできます(間違った領域を選択した場合).

満足したら, ブロックを保存 あなたのサイトに追加します.

11.既存のブロックを管理する

もちろん、サイトに既に表示されているブロックについて、必要な変更を加えることもできます。下のドロップダウンメニューを使用します 領域 それらを別の場所に移動する.

垂木ブロックを編集する

右側でクリック 構成、設定 以前のブロック設定にアクセスして変更することができます。代わりに矢印アイコンをクリックすると、ブロックを無効にするか完全に削除するオプションが表示されます.

変更を加えたら、画面下部に保存することを忘れないでください.

変更を加えた後のdrupalブロックを保存

ちなみに、サイトのフロントエンドから特定のブロックを編集することもできます。それらのいずれかにカーソルを合わせると、ペンのアイコンが表示されます。クリックしてから、もう一度クリックします。 ブロックを構成する.

drupalのフロントエンドからブロックを構成する

これにより、以前と同じメニューが表示されます.

drupal構成ブロックメニュー

ここでは、設定を変更し、それらを新しいリージョンに割り当て、ブロックを削除することもできます.

12.カスタムブロックを作成する

ちなみに、独自のカスタムブロックを作成することもできます。これは、たとえば、サイトのさまざまな領域に表示したい情報がある場合に有効です。これは、ビジネスの営業時間、または訪問者に見てもらいたい特定のニュースの可能性があります.

必要な場合は、 構造>ブロックレイアウト>カスタムブロックライブラリ (上部のタブ).

drupalでカスタムブロックを作成する

ここで、 カスタムブロックを追加 この画面を表示するには:

カスタムdrupalブロックを編集する

あなたと他の管理者がそれが何であるかを知っているように、ブロックの説明を入力してください。次に、ブロックに表示するコンテンツを下のエディターに入力します.

完了したら、カスタムブロックを保存します。これを行うと、他のブロックと同じように、サイトの別のリージョンに割り当てることができます.

さらにヘルプ

上記はDrupalでWebサイトを構築するための強固な基盤を提供するのに十分ですが、Drupalを強力に活用するには忍耐力が必要です。学習プロセスには時間がかかり、学習するための最良の方法の1つは、ツールとシステムをいじって、サイトに必要なものを実装する方法を理解することです.

ただし、Drupalについて学ぶためのより体系的なアプローチが必要な場合は、以下のリソースが非常に役立ちます。.

何を学びたいとしても、その情報はおそらくすでにそこにあります。だから、それを見つけるまでそれをググるのをためらわないでください.

DrupalでWebサイトをセットアップしようとしましたか?途中でどんな障害物を打ちましたか?追加の学習リソースに関するヒントはありますか?以下のコメントでお知らせください!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Adblock
    detector