Web Design Articles

Wordpressの凄い点は、まるで着せ替えのようにデザインを変える事ができる事です。 これをテーマと呼びます。 テーマのインストール画面 管理画面から、初期インストールの「twentyfifteen」「twentysixteen」「twentyseventeen」を選ぶこともできますし、世界中のデザイナーがデザインしたテーマを探して来て、インストールする事ができます。 テーマを新規に入れる事ができる画面 個別のテーマのディレクトリの位置とファイル構成 「wo-content/themes/」の以下にテーマ毎のディレクトリがあり、その下にテーマファイル群が配置されています。 テーマは既存のものを入れることもできますが、もちろん自作することも可能です。 テーマに必要なファイルは次の通りです。 index.php メインテンプレート style.css テーマのcss 最低限、この2つがあればテーマは作成できます。 さらに、より高機能にしたい場合には function.php 関数ファイル search.php 検索ページ 404.php 404ページ 画像ファイル など様々に追加できます。 なお、参考までに「twentyseventeen」のテーマファイル群は次の通りです。 ページのパーツ毎に切り出されてそれぞphpファイルになっているのが分かるかと思います。 ちなみにphpとはhtmlにプログラム機能を付加した凄いやつです。 １つのphpファイルには「html」と「phpプログラム」の両方が記載されています。 それぞれのファイルの意味は次の通りです。(すでに紹介したもの以外) header.php ヘッダー部分 footer.php フッター部分 sidebar.php サイドバー部分 archive.phpはアーカイブページ comments.php コメント欄 front-page.php フロントページ page.php 固定ページ single.php 投稿ページ image.php 画像を入れた時の部分 searchform.php 検索ボックス README.txt テーマの説明 rtl.css [...]

まず、MySQLに新しいDBを追加します。 追加をするためには、MySQLにアクセスしてDBを新しく追加します。 mysqlコマンドを利用する方法もありますが、ここでは便利なアプリを利用します。 MAMPではphpMyAdminが自動インストールされるので、そちらからDBを追加するのも良いかと思います。 オススメはMacの場合は『Sequel Pro』です。 https://www.sequelpro.com/　 Windowsでは『MySQL Workbench』がオススメです。 https://dev.mysql.com/downloads/workbench/ phpMyAdminだとUIが分かりにくいので、専用のアプリを入れることをオススメします。 ここからは『Sequel Pro』を使って説明していきます。 データベースを追加から進みます。 データベースの名前を任意に設定します。 文字コードは日本語を使う場合、『utf8mb4』を選びます。 UTF8は寿司ビール問題など問題があるため、utf8mb4を選んでおきましょう。 ※のすけは以前AWS環境でMySQLを利用している際に文字コードを『utf8』にしてしまい。日本語が文字化けるという問題が発生し、DBを再作成しレプリケーションしなくてはいけない事があり大変でした。ここは忘れずに『utf8mb4』にしましょう。 DBを作成したら、接続します。 ホスト名、パスワードを入力して接続します。 (MAMPを利用している場合には、Welcome画面にMySQL接続設定が書かれています) 次にWordpressのインストールです。 Wordpressは最新版を利用することが肝心です。なぜなら、世界中で利用されておりセキュリティパッチの更新も頻繁なため 最新版ではないとセキュリティ的に脆弱になってしまう懸念があるからです。 こちらから入手はこちらから https://ja.wordpress.org/download/ ダウンロードしたら、MAMPの環境にインストールしていきます。 解答したwordpressの中身をドキュメントルートのhtdocsの下にコピーして 任意の名前にリネームします。(画像ではlocaltestにしました) そして、ブラウザでアクセスします。 URLはMAMPのURLの[MAMP]という部分をリネームしたフォルダ名にします。 「http://localhost:8888/ここにフォルダの名前/」 画像では次の通りです。 http://localhost:8888/localtest/ Wordpressのインストール画面ができてたら正解です。 次に画面を進めてインストール作業を行なっていきます。 途中で出て来るDBの設定は、先ほど作成したMySQLのDBの設定値を入力していきます。 テーブル接頭辞は[wp_]で良いでしょう。 接続に成功すれば、インストール実行を押します。 ここで、サイトのタイトルやユーザ名を入力します。 重要な点として、実際にインターネットのサーバ上にwordpressをインストールする場合には ユーザ名にはrootやadminなど分かりやすいものは利用しないことです。 固有のユーザ名を利用しましょう。adminなどを利用してしまうと容易に推測できてしまうので 攻撃されやすくなります。 ※MAMPにインストールする場合は問題ありません。 ログイン画面からログインすることで管理画面に行くことができます。 また、ルートアドレスに移動するとWordpressのトップ画面が表示できました。 http://localhost:8888/localtest 今回はここまで。 以上Wordpressのインストールでした。 [...]