Web Design Articles

Wordpressをカスタマイズする際に、デバッグしたいですよね。 そんな時は、エラーを画面に表示するようにデバッグモードをONにしましょう。 設定ファイルはwp-config.php 次のように設定しましょう。 define('WP_DEBUG', true); デバッグモードをOFFにしたい場合は、次のようにします。 define('WP_DEBUG', false); ログに出力する ログに出力したい場合には、さらに次のようにします。 define('WP_DEBUG', true); //デバッグモードON if (WP_DEBUG) { //デバッグモードONの場合 define('WP_DEBUG_LOG', true); //debug.logファイルに保存 define('WP_DEBUG_DISPLAY', false); //画面に表示しない } 上記のように設定した場合、wp-contentフォルダに「debug.log」というファイルができて そこにエラーが記録されていくようになります。

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のインストールでした。 [...]

ローカルテスト環境とは、自分のPCの内部にサーバを立てて、プログラムを作成とテストをしていくための場所です。 プロダクション環境では、インターネットにアクセス可能な状態で公開されてしまいますので、あまり好ましくありません。 また、一旦リリースした後でも、追加で新しいコンテンツの追加などを継続的に行っていくためにも、テスト環境が必要です。 そこで、自分のPCの内部にサーバを立てて、テストをしやすくします。 これで、いつでもどこでもプログラムの作成や検証ができるようになります。 実際、多くの人がご自分のPCにローカル開発環境にサーバを立ててテストをしており 便利なツールも出てきています。 それが『MAMP』です。 その他にもWindowsではXAMPPというツールも有名です。 XANPPやMAMPを入れる理由は、WEBサーバ環境を独自に簡単にインストールできるからです。 名前の由来は、「XAMPP」がX:クロスプラットフォーム、Apache、MySQLまたはMariaDB、PHP、Perlの頭文字を。 「MAMP」がMacintosh, Apache, MySQL, PHP の頭文字を繋げた名前です。 ちなみにMAMPはWebサーバとしてNginx、言語としてPythonも選べるのでより現代的です。 ※MAMPは今はWindows版もリリースされています。 ですので、Windowsの方もここではMAMPをインストールして開発を始めましょう。 MAMPのインストール MAMP(マンプ) https://www.mamp.info/en/ 例えば、普通は次の通りいくつものプログラムを環境に入れる必要があります。 Apache（Webサーバ） MySQL（SQLデータベース） Webプログラミング言語（PHP、Rubyなど） XAMPPやMAMPはこれらの環境が簡単に設定できます。 MAMP & MAMP PRO こちらからプログラムをダウンロードして、インストールを進めます。 案内にしたがってインストールをします。 途中でPRO版のMAMP PROもインストールされますので、この画面で[カスタマイズ]をクリックし、[MAMP PRO]のチェックを外しましょう。 インストールには1.4GBほどの空き容量が必要です。 インストール完了後、MAMPアプリケーションを起動してください。そうするとサーバの起動画面ができてきますので 右の[Start Servers]をクリックしてサーバを起動しましょう。[Apache Server]と[MySQL Server]の横のランプが緑に点灯すれば正常に起動しています。 なお環境によっては、起動した後にファイアウォールの警告画面が出てくる事があります。 これは通信を[許可]するようにしましょう。 そしてブラウザでMAMPのスタートページが表示されます。 表示されない場合は、次のURLを開きましょう。 http://localhost:8888/MAMP/ ポートの8888がMAMPのApacheに割り当てられています。 正常に[Apache Server]が起動していない場合には、上のメニューの[Preferences]をクリックして [Ports]タブを開きます。ここでApacheのポートを8888から利用指定なさそうなポートに変更しましょう。 例:8890など そして再び、[Start Servers]をクリックしてサーバを起動してみてください。 [...]

こんにちは、のすけです。 長らく書いていませんでした。 その間色々ありましたが、とりあえず題名について触れます。 はりうすでは、今までNodeやRuby on RailsとかでWebアプリを書いていたのですが、、、 社員が僕１人となった今では、１からコードを書いて作るスクラッチ開発はキツいため なかなか受注が難しいです。(及び腰になる) そこで、全世界の30%！！のWebページで利用されているWordpressに 鞍替えしようかと思います。 今まで、Wordpressとかクソでしょ！ とか斜に構えて、ある種のプライドを持っていましたが。 そんなプライドなんて捨てて、実際に利用してみると良かったです。 実運用上では記事の更新やレイアウト変更をしたい際に コーダーではない人がやる場面が多く、スクラッチ開発だと変更が遅くなる。 コーダーに作業が集中してしかも待ちが発生するなどの事案が多く。 Wordpressは使えるなぁと再認識しました。 そこで　Wordpressを活用させて頂くことに決めました。 Wordpressの利点 みんな使ってるので使い方に慣れてる(記事書く人とか) 管理画面がわかりやすい 基本機能は最初からある(ページ作る・記事書く、動画載せる) 機能追加もプラグインでだいたいできる(EC機能すらも) 誰でも触れる デザイナーでも画面レイアウトを直接を編集できる(コーダー不要) プラグインとかで解決できない時にコーダーの出番！ という感じで、いいこと尽くめです。 不満点はシステムがちょっと遅い！！！ セキュリティが心配(みんな使ってるからハッカーに狙われやすい) という感じです。 Wixはかゆい処に手が届かない 一時期プログラミングから距離を置いていた時 WixというWeb上でデザインとかも自由に設定できて ホームページも簡単に作れると謳うWebサービスを利用していて 半年ほど運用していたのですが ちょっと私には厳しかったです。 「こんな機能欲しいなぁ」とか「ここをちょっとこうしたい」という かゆい処には全く手が届かないです。（コードを修正できないのでどうしようもない） Javascriptも使えないですので、かなりの縛りプレイです。 半年利用して、限界を感じてしまいました Wixもこのことは認識していて、Wix Codeという新機能のリリースもあるようですが ベータ版をちょっと触ってた感じでは、戻りたいとは思いませんでした。 Wordpressの自由度と比べるとWordpressに軍配が上がりました。 かゆい処に手がとどく Wordpress 機能はプラグインで追加できる、デザイン修正したいときはCSSやJSを触れる。 ちょっとした機能追加もPHPを書けば作れる！ システム関連連携もPHP書けばできる！(色々と作業を自動化できる！) 例えば、会員機能をつけたのですが、Wordpress内に会員のアクセス機能を管理しながら [...]