“Ability proceeds from a fusion of skills, knowledge, understanding and imagination, consolidated by experience.”
MICHAEL KLARKE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare porttitor ipsum a mollis. Pellentesque sagittis enim ac libero luctus, at vulputate ante lobortis. Praesent lacinia, leo sit amet congue malesuada.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor ins.
RECENT ARTCLES
lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ets unsers.
【超入門】最小構成のWordPressテーマを作る
のすけです。 前回はWordpressテーマの構成について触れました。 hollywis.hatenablog.com 今回はWordpressテーマを作っていきたいと思います。 それも最小の。 レイアウトを決める まず実現したいレイアウトを決めます。 今回は最小構成ということでHTMLはこんな感じにします。 <!DOCTYPE html><!--html宣言--> <html lang="ja"><!--日本語指定--> <head> <meta charset="UTF-8"><!--エンコード：UTF-8指定 --> <title>サイトのタイトル</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0 "><!--スマホ用:viewportの設定--> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--CSSの呼び出し--> </head> <body> <header class="site-header"> [...]
WordPressのデバッグモードをONにする
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はアーカイブページ [...]
WordPressをローカルテスト環境にインストール
まず、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のインストール画面ができてたら正解です。 [...]
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 [...]
やっぱりWordPressだった。WordPress有用性を再認識する！
こんにちは、のすけです。 長らく書いていませんでした。 その間色々ありましたが、とりあえず題名について触れます。 はりうすでは、今までNodeやRuby on RailsとかでWebアプリを書いていたのですが、、、 社員が僕１人となった今では、１からコードを書いて作るスクラッチ開発はキツいため なかなか受注が難しいです。(及び腰になる) そこで、全世界の30%！！のWebページで利用されているWordpressに 鞍替えしようかと思います。 今まで、Wordpressとかクソでしょ！ とか斜に構えて、ある種のプライドを持っていましたが。 そんなプライドなんて捨てて、実際に利用してみると良かったです。 実運用上では記事の更新やレイアウト変更をしたい際に コーダーではない人がやる場面が多く、スクラッチ開発だと変更が遅くなる。 コーダーに作業が集中してしかも待ちが発生するなどの事案が多く。 Wordpressは使えるなぁと再認識しました。 そこで Wordpressを活用させて頂くことに決めました。 Wordpressの利点 みんな使ってるので使い方に慣れてる(記事書く人とか) 管理画面がわかりやすい 基本機能は最初からある(ページ作る・記事書く、動画載せる) 機能追加もプラグインでだいたいできる(EC機能すらも) 誰でも触れる デザイナーでも画面レイアウトを直接を編集できる(コーダー不要) プラグインとかで解決できない時にコーダーの出番！ という感じで、いいこと尽くめです。 不満点はシステムがちょっと遅い！！！ セキュリティが心配(みんな使ってるからハッカーに狙われやすい) という感じです。 Wixはかゆい処に手が届かない 一時期プログラミングから距離を置いていた時 WixというWeb上でデザインとかも自由に設定できて ホームページも簡単に作れると謳うWebサービスを利用していて 半年ほど運用していたのですが [...]
