Webサイト制作のワークショップ」のメモです。

あらゆるWebサイトで CMS(コンテンツ・マネジメント・システム)が導入されており、その中でも WordPress が多くの割合を占める。WordPress を使用することで、通常の html(静的サイト)では実現不可能な動的サイトを構築できる。

WordPress はブログを作るためのものではなく、クライアント側で簡単にコーポレートサイトのお知らせ更新を行うなど、カスタマイズによって色々な使い方ができる。

enjoy!

データベースを作成する

WordPress では、コンテンツの内容をすべてデータベースに保存している。それによって、Webサイトのデザイン(テーマ)とコンテンツ(データベース)を完全に切り分けて管理できるので、デザインを変更してもコンテンツ自体が失われることはない。

まずはレンタルサーバーの管理画面でデータベースを作成する。この後 WordPress のインストールで必要になるので、データベースサーバ(データベースのホスト名)、データベース名、ユーザ名、パスワードがわかるようにしておく。

  • MySQL|データベースの種類(他に PostgreSQL など)
  • phpMyAdmin|管理ツール

MySQL 接続の照合順序は多くの場合「utf8_general_ci」にする。「utf8_general_ci」の特徴は、アルファベットの大文字小文字は区別しない。全角半角は区別する。

WordPressをダウンロードする

WordPress には「WordPress.com」と「WordPress.org」がある。WordPress.com は無料ブログサービス。WordPress.org はレンタルサーバーにインストールするソフトウェア版。後者の WordPress.org のものをWebサイト制作では使っていく。

FTPソフト

FTP は File Transfer Protocol – ファイル転送の通信規約。サーバーと接続してデータを転送するための通信方式。他の通信方式として、Webサイトを閲覧する時に使う http(Hypertext Transfer Protocol – ハイパーテキスト・トランスファー・プロトコル)のような通信方式がある。こちらはデータを閲覧するためのもの。

FTPソフトを使って、ダウンロードした WordPress のデータをサーバーにアップする。Mac のおすすめFTPソフトは Transmit。無料で使える Cyberduck も FTP/SFTP/Amazon S3/WebDAV 等の接続に対応しているので機能的には問題ない。両方試用してみて決めるのもOK。

Transmit(公式サイトApp Store
公式サイトは¥3,400、App Store は¥4,100。

Cyberduck(公式サイトApp Store
公式サイトは¥0(寄付することは可能)、App Store は¥2,900。

  • FTP|サーバーに接続するためのプロトコル(通信規約)。もっともよく使う方式。
  • SFTP|サーバー側の公開鍵とPC側の秘密鍵を使って、お互いに認証して接続するプロトコル。セキュアなFTP。
  • Amazon S3|AWS(Amazon Web Services)が提供するオンラインストレージのWebサービス。AWSはクラウドサービス。
  • WebDAV|ファイル共有できるストレージ。

WordPressのインストール&設定

サーバーにアップロードしたディレクトリにアクセスするとインストール画面が表示されるので、手順に沿って設定を進める。

データベースの情報を入力する。

データベース情報が問題なければインストールに進む。

WordPress のログイン情報を設定する。「検索エンジンでの表示」は、テストサイトや制作中のサイトの場合はチェックをオンにして、検索結果に表示されないようにしておく。

先ほど設定したログイン情報で管理画面にログインする。

WordPressの基本的な使い方

作成できるページは、「投稿」と「固定ページ」の2種類ある。

  • 投稿|ブログのように常に作成されていくページ。
  • 固定ページ|コーポレートサイトの「About」など、常に固定で存在するページ。
  • 外観 > テーマ|テーマの変更を行うことができる。オリジナルで制作したテーマのデータもここに表示される。
  • 外観 > ウィジェット|サイドメニューなどのウィジェットを編集できる。
  • プラグイン|Similar Posts(関連記事を表示させるプラグイン)などをインストールすることで、Webサイトに様々な機能を追加できる。
  • ユーザーの追加|様々な権限でユーザーを追加できる。たとえば「投稿者」の権限でユーザーを追加すると、テーマやプラグインの編集メニューは表示されず、基本的なメニューのみが表示される。

WordPressを使用したWeb制作は、総合的なスキルが求められる

  • ドメイン|ドメイン取得とネームサーバーの設定
  • レンタルサーバー|ドメイン設定やメールアドレス作成、データベース作成、WAF(Web Application Firewall)
  • FTP接続|サーバー接続
  • WordPress|CMS
  • データベース|MySQL、phpMyAdmin
  • PHP|プログラム言語
  • HTML、CSS|マークアップやデザイン

こちらの関連記事もあわせてどうぞ!

    WS|Webサイトのテキスト

    「Webサイト制作のワークショップ」のメモです。 デバイスによって表示されるフォントは異なる。ゴシック系や明朝系という指定をするのが基本。ある程度デバイス共通フォントもでてきたが、ウエイトも含めると…

    WS|PhotoshopでWebデザイン

    「Webサイト制作のワークショップ」のメモです。 Photoshop で Webデザインする場合、文字組みや画像配置など、Illustrator でグラフィックデザインをする操作に近い。シェイプレイ…

    WS|マルチデバイスへの対応とモバイルファースト

    「Webサイト制作のワークショップ」のメモです。 あらゆるWebサイトへのアクセスが、PCよりもスマホからのアクセス数の方が多くなった。そういった背景にあわせてWebサイト制作の順番も素早く変えてい…

    WS|フラットデザイン

    「Webサイト制作のワークショップ」のメモです。 リアルな世界に存在するボタンのメタファーをWebに取り入れることで、ボタンを押すとページが移動するという操作を直感的に行えるようにした。こういった操…

    WS|Webデザインのおすすめ本

    「Webサイト制作のワークショップ」のメモです。 WebサイトのUI(ユーザーインターフェイス)デザインには、ビジュアルで感性に訴えかける「ビュー」と、ページ移動などのナビゲーションを行う「コントロ…