投稿者: admin Page 23 of 47

WordPressカスタムテーマ初期セットアップのメモ

WordPressカスタムテーマ初期セットアップのメモ

いつもダウンロードして適当に設定していくのでメモを兼ねてまとめてみました。

事前準備

DB作成

$ mysql -uroot -p
mysql> CREATE DATABASE `iemono` /*!40100 DEFAULT CHARACTER SET utf8 */;

WordPressダウンロード〜解凍リネーム

$ wget https://ja.wordpress.org/latest-ja.tar.gz
$ tar zxvf ./latest-ja.tar.gz
$ mv wordpress wp
$ rm latest-ja.tar.gz

WordPress関連設定

パーミッションなど設定(開発環境のため簡単に777にしてます。本番はちゃんと設定する

$ mkdir wp/wp-content/upgrade
$ mkdir wp/wp-content/uploads
$ chmod 777 wp/wp-content/upgrade wp/wp-content/uploads wp/wp-content/plugins wp/wp-content/languages wp/wp-content/themes 

.htaccessファイル設置(パーマリンク用)

$ vim wp/.htaccess

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

インデックスファイル作成

$ vim ./index.php

<?php
/**
 * Front to the WordPress application. This file doesn't do anything, but loads
 * wp-blog-header.php which does and tells WordPress to load the theme.
 *
 * @package WordPress
 */

/**
 * Tells WordPress to load the WordPress theme and output it.
 *
 * @var bool
 */
define('WP_USE_THEMES', true);

/** Loads the WordPress Environment and Template */
require( dirname( __FILE__ ) . '/wp/wp-blog-header.php' );

設定ファイル(wp-config)設定

$ mv wp-config-sample.php wp-config.php
$ wp/wp-config-sample.php wp/wp-config.php
$ vim wp/wp-config.php

(具体的ところだと)

  • FS_METHODを’direct’に
  • DB設定
  • salt設定

環境ごとの接続情報メモ

define('ENV_PRODUCTION','env_production');
define('ENV_STAGING','env_staging');
define('ENV_PREVIEW','env_preview');
define('ENV_LOCAL','env_local');

switch (isset($_SERVER['SERVER_NAME']) ? $_SERVER['SERVER_NAME'] : '') {
    case 'example.com':
        define('ENV',ENV_PRODUCTION);
        define('DB_NAME', 'xxx');
        define('DB_USER', 'xxx');
        define('DB_PASSWORD', 'xxx');
        define('DB_HOST', 'xxx');
        break;

    case 'staging.example.com':
        define('ENV',ENV_STAGING);
        define('DB_NAME', 'xxx');
        define('DB_USER', 'xxx');
        define('DB_PASSWORD', 'xxx');
        define('DB_HOST', 'xxx');
        break;

    case 'preview.example.com':
        define('ENV',ENV_STAGING);
        define('DB_NAME', 'xxx');
        define('DB_USER', 'xxx');
        define('DB_PASSWORD', 'xxx');
        define('DB_HOST', 'xxx');
        break;

    default:
        define('ENV',ENV_LOCAL);
        define('DB_NAME', 'example');
        define('DB_USER', 'root');
        define('DB_PASSWORD', 'root');
        define('DB_HOST', 'localhost');
        break;

}

ローカルURLへアクセス

URLへアクセス(ドキュメントルート設定済を想定)

http://localhost/

管理者情報、サイト名などを登録

管理画面設定

プラグイン設定

プラグイン関連をテンプレートから持ってくる&アップデート

投稿のカテゴリ設定

  • 未分類をお知らせ(information,topicsなど)に変更

固定ページ作成

  • トップページ(/top/)
  • お知らせページ(/news/)
  • お問い合わせページ(/contact/)

設定

一般設定

  • ドキュメントルート位置、キャッチフレーズ、Dateのフォーマット

投稿設定

特になし

表示設定

  • フロントページを[固定ページ] > トップページを選択
  • 投稿ページを、固定ページのお知らせページ

ディスカッション

とくになし

メディア

サイズをアップ 300,600,1024に

パーマリンク設定

カスタム構造

/%category%/%postname%

Akismet

とくになし

I Order Terms

とりあえずすべて可能に。

バックアップ設定

BackWPupにて
– job作成 設定はブログに合わせて

テーマ設定

  • style.cssのテーマ概要を変更
  • 管理画面から有効化
  • 不要なテーマを削除(選択すると右下に削除のテキストリンクが出る。)

よく忘れるLinuxコマンドのメモ

よく忘れるLinuxとMacのターミナル(Terminal)コマンドのメモ

置換

//ファイル名を一斉に置換
$ find . -type f | sed 'p;s/FROM_TEXT/TO_TEXT/' | xargs -n2 mv

ネットワーク関係

//ipv6のアドレス(type=AAAAをセットしてから)
$ nslookup 
> set type=AAAA
> youtube.com
//ipv6の経路(traceroute6を使う)
$ traceroute6 2404:6800:4004:80d::200e
//ping -sはsize (mac OSX 10.12.6環境)
$ ping -s 500 yama-lab.com
$ ping6 -s 500 yama-lab.com
//traceroute
$ traceroute yama-lab.com

Windowsで作成したzipファイルを文字化けせずに解凍

$ unar ファイル名

(unarをHomeBrewでインストールしています。)

標準出力をクリップボードに取得する(Mac)

$ pwd | pbcopy

Macでパスワード作成(pwgen)

$ pwgen //普通
$ pwgen -y 12 // symbolをまぜて12文字作成

サービスの状態確認

$ service postfix status

現在使われているMTA確認

$ alternatives --display mta

ContOSのバージョン確認

$ cat /etc/redhat-release
CentOS release 6.9 (Final)

Macの不要ファイル削除

$ find ./ -name ".DS_Store" | xargs rm

ディスク容量

$ du -h --max-depth 1 /

パッケージの概要

$ rpm -qi nginx

パッケージ内のファイル

$ rpm -ql nginx

シンボリックリンク

$ ln -s {target} {new link directory or file}

firewalldでのサービス追加・削除

//ようにhttp,httpsを設定を許可
# firewall-cmd --permanent --zone=public --add-service=http 
# firewall-cmd --permanent --zone=public --add-service=https  
//とすると設定ファイル(xml)が変更される(削除の場合は--remove-service='http'など)
# cat /etc/firewalld/zones/public.xml
<?xml version="1.0" encoding="utf-8"?>
<zone>
  <short>Public</short>
  <description>For use in public areas. You do not trust the other computers on networks to not harm your computer. Only selected incoming connections are accepted.</description>
  <service name="dhcpv6-client"/>
  <service name="http"/>
  <service name="ssh"/>
  <service name="https"/>
</zone>
//リロードして完了
$ firewall-cmd --reload

firewalldでポート追加・削除

//ポートとプロトコル指定
 # firewall-cmd --add-port=8888/tcp --zone=public --permanent
 // 確認
# cat /etc/firewalld/zones/public.xml
<?xml version="1.0" encoding="utf-8"?>
<zone>
  <short>Public</short>
  <description>For use in public areas. You do not trust the other computers on networks to not harm your computer. Only selected incoming connections are accepted.</description>
  <service name="dhcpv6-client"/>
  <service name="http"/>
  <service name="ssh"/>
  <service name="https"/>
  <port protocol="tcp" port="8888"/>
</zone>

firewalldでの許可を確認する方法

#  firewall-cmd --list-all --zone=public
# firewall-cmd --list-services --zone=public
# firewall-cmd --list-ports --zone=public
 

ブラウザのよく使うショートカットキー

ブラウザのよく使うショートカットキー

1秒でも1瞬でも早く情報をサーチゲットし情報の波にながされたいためのよく使うショートカットキー

検索窓へ移動

Ctrl(または⌘) + L

スクロール

Space (逆はShift + Space)

再読込

Ctrl(または⌘) + R

矯正再読込

Ctrl(または⌘) + Shift + R

新規タブ

Ctrl(または⌘) + T

最近開いていたタブを表示

Ctrl(または⌘) + Shift + T

いろいろ図書館で借りて読んだ本のメモ。

いろいろ図書館で借りて読んだ本のメモ。

だいぶ久しぶりにちかくの図書館へ近年の書籍もふえていたのでいろいろ借りて読んでみました。
とはいっても、時間もあれなので、かなりざっくりと目を通して気になったところをメモ。

詳解wordpress

DBの中身まで理解したい人や、プラグイン、ウィジェット、テーマなどをオリジナルで開発したい人は読んでおくと良さげ、すでに開発などしている人はソースコードなど読んだ方がはやいかと。
DBはテーブルごと細かく解説されていて、プラグインの開発サンプルなども解説あります。
※すこし発行が古いのでHHVMなど紹介あるが、いまとなってはPHP7でいいかもとかはある

ハイパフォーマンス ブラウザネットワーキング

前半はTCPの基礎などネットワークの基礎的なところから、後半はコンテンツ(HTTP)側のXHR,WebSocketなどコンテンツ部分まで幅広くカバー、インフラエンジニア〜フロントエンドエンジニアな人にはおすすめ、時間があれば購入してしっかりよみたい。
オンラインゲームの通信とか、チャットとか、配信サービスとかいろいろと礎になりそう。

面白かったのは以下のユーザの知覚。
このブログも5秒くらい、どうにか安く1000msくらいにしたいな。

  • メモ : 時間とユーザの知覚
遅延 ユーザの知覚
0–100ms 瞬時
100–300ms わずかな知覚可能な遅延
300–1000ms マシンが動作している
1000ms+ メンタルコンテクストスイッチが発生する
10000ms タスクを破棄

vim関係メモ

複数行コピー

開始行へ行き mm
終了行の次の行で y`m

行表示非表示

:set number
:set nonumber

vimでUTF–8が文字化け回避

~/.vimrc に以下を追加( or 新規作成)

set encoding=utf-8
set fileencodings=iso-2022-jp,euc-jp,sjis,utf-8
set fileformats=unix,dos,mac

robot.txt とかカノニカルタグとか、sitemap.xml とか

robot.txt とかカノニカルタグとか、sitemap.xml とか

いつも入れる必要?いれない不要?入れたほうがSEO的に(迷信だよ)?いや、もしものために念のために、
ってなるので再度調べてまとめておくことに。

robot.txt

登録したくないコンテンツが含まれる場合のみ必要で、基本必要ない。
ただし、以下の参考サイトにあるとおり、

サイトに robots.txt ファイルが存在するがアクセスできない(言い換えれば、HTTP ステータス コード 200 または 404 が返されない)場合は、クロールすべきでない URL をクロールすることにならないよう、クロールを延期します。

つまりサーバーで何かしらの不具合などで robots.txtが404,200も返さない状態になったらクロールしないよ。とのこと、常にSeachConsoleなどでサイトを管理している場合は問題ないがそれ以外の放置している系のサイトは入れていたほうが無難っぽいです。あと最近のWordPressの場合は以下のようなrobots.txtを仮想で生成してくれます。(※注意パーマリングの設定が?p=123とか、サーバーのリライト設定が有効でないと生成されない)
(WordPress自動生成のrobots.txt 管理画面を除外してくれている

User-agent: *
Disallow: /wp-admin/
Allow: /wp-admin/admin-ajax.php

参考サイト : Google Search Console ヘルプ

カノニカルタグ(canonical)

  • 複数あるURLを正規化、www有、無などあるので基本入れたほうが良いっぽい、
  • ただ静的(Static)なコンテンツの場合はメンテナンス性も落ちたりURL変更時の編集コストなどが高そう。なにか変更の際のうっかり変更もれは注意。
  • スマホがページ別等の場合は必須かな。
    GogoleのSearch Console ヘルプでの説明は以下。このページ自体もちゃんと入ってますね。

参考 : Search Console ヘルプ

動的サイトなどの場合はヘッダーは共通のはずなので入れて置くほうがよいかも

環境変数などで簡単に設定できるはずなので、入れておけば無難かな。

静的サイトは入れなくてもよいのかも

基本SEOアクセスを気にするようであればAnalyticsで気づくはず、気付かないれべるの気合なら入れないほうが皆幸せかも。

サーバー側で、

www 有り無しの統一などはしてあげてあげると良いかも。

sitemap.xml

こちらは基本的には、サイトマップが必要かどうかを検討する必要もありそうです。
他のページからリンクされているページは基本クロールされそうだけどそもそもリンクが無いページをインデックスさせるケースとか設計的にかなり特殊そうな気もする。
あとは初期公開のサイトや、リニューアルでURLが変更になったりなどのばあいは、クロール漏れなどは怖いので念のために入れておきたい気もする。(合わせてページ変更の302リダイレクトなども)

以下のGoogleのヘルプページの、‘サイトマップが必要かどうか’ 部分が参考になります。

参考 : サイトマップについて Search Console

ページが多いサイトでのメンテナンスも大変なので、基本はなしで、必要な際に設置、ボリュームが莫大なら自動生成プログラムや、WordPressだとプラグインで自動生成が楽そう。

Search Consoleの登録

検索キーワードがAnalyticsでほとんど見れなくなっているので、こちらでアクセスに繋がったキーワードの表示順位や実際のアクセスになったかなど非常に有益な情報をみれたり、クロールのエラーなども検知できるので必須といえます。
(そういえば昔、Bing – Web マスターツールって登録したけど全然みなくなったな、なにか有益な活用方法など教えて欲しい)
あと、AMPのエラー検知なども便利。

nginx関係のメモ

nginx関係のメモ

主なディレクトリ構成

Directory note
/etc/logrotate.d ログローテーション設定ファイル
/etc/nginx/~ 設定ファイル関連
/usr/lib/systemd/system/nginx.service 起動スクリプト(systemdの設定ファイル)
/usr/lib64/nginx/modules/~ モジュール置き場
/usr/share/nginx/html/ ドキュメントルート
/var/cache/nginx/~ キャッシュファイルが置かれる
/var/log/nginx/~ ログファイル

設定ファイル

  • nginx.conf : 最初に読み込みまれる、以下の記述が有り別のファイルを読み込んでいる。
  • mime.types : フィアルタイプのマッピング
  • conf.d/default.conf : 基本的なWebサーバーの設定
  • scgi_params,uwsgi_params : CGI/WSGIのパラメータとnginxの変数のマッピング
  • win-utf,koi-utf,koi-win : ロシア語の文字コード関連ファイル普段使わない

設定ファイルのチェック

sudo nginx -t

状態確認、起動、終了、再起動、再読込+バイナリ入れ替え

$ sudo systemctl status nginx
$ sudo systemctl status nginx  //状態表示+ログ
$ sudo systemctl start nginx
$ sudo systemctl stop nginx
$ sudo systemctl restart nginx
$ sudo systemctl reload nginx

バイナリ入れ替えは新しいものが起動した後で、元を順次終了するのでサービスをストップせずに行える

$ sudo /sbin/service nginx upgrade

nginxコマンド

Command Note
nginx -h ヘルプ
nginx -v バージョン
nginx -t 設定ファイルのテスト
nginx -T 設定ファイルのテスト+表示
nginx -V バージョン情報+コンパイルフラグなど、組込モジュールの確認
nginx -s stop デーモンの停止強制
nginx -s quit 処理中のリクエストを待って停止
nginx -s reopen ログファイルを開き直す
nginx -s reload 実行中に設定ファイルを再読込

設定ファイルで使える変数

var value
$request_method GET
$host,$http_host www.example.com
$uri,$document_uri /path/to/file
$request_uri /path/to/file?a=1
$http_user_agent ユーザーエージェント
$http_cookie クッキー
$server_protocol HTTP/1.1
$query_string,$args 引数部分
$arg_{name},$cookie_{name},$http_{name} 引数、クッキー、HTTPヘッダー

端末が縦(portrait)と横(landscape)の方向を判定するメディアクエリの書き方(sass記法)

めも

@media all and (orientation: portrait)
    #footer
        position: fix
        bottom: 0
@media all and (orientation: landscape)
    #footer
        position: relative
        bottom: auto

GoogleMap JavaScript APIで地図にマーカー(ピン)を複数表示するサンプル (2017.07現在 ver3)

Google Cloud PlatformでAPIキーを取得

https://console.cloud.google.com/home/dashboard

にアクセスします。

まずプロジェクト作成

ヘッダーのプロジェクトの一覧部分をクリックして、ポップアップウィンドウが開いたら+ボタンを押して新規作成画面へ行き作成します。

title

title

title

title

APIの有効化

左メニューの [API Manager] をクリック、作ったプロジェクトが選択されていることを確認して、+APIを有効にするボタンを押します。

title

title

そこでGoogle Maps JavaScript API を選択

title

title

そのまま▶有効にするボタンをおす。

title

title

認証情報(APIキー)を取得をクリックして認証情報を作成とすすみます。

title

title

認証情報(APIキー)が作成されました。

※ちなみに作成した時点では左側に警告マークがでています。これはAPIへのアクセスがドメインなどで制限されていないので、他のサイトで流用されたりすることがある旨の警告です。
(公開時にはドメインを設定するとよいでしょう)

HTMLのベースを作成

GoogleMapを表示する部分をマークアップします。

HTML

普通にIDをつけたタグ(エレメント)を作成します。
(id名はなんでも良い)

<div id="map"></div>

CSS

HTMLにサイズなどを指定します。(幅、高さを指定しないと表示されない)
ここでは、ブラウザ横幅いっぱいで4:3の比率での設定例としています。vwの単位は画面の幅を基準にした単位

#map { 
    width : 100vw;
    height : 75vw;
}

JavaScriptと全コードまとめ

以下にHTML,css,JavaScriptをまとめ。※YOUR_API_KEYの部分を前項で取得したあなたのAPIキーに置換します。

<style type="text/css">
#map { 
    width : 100vw;
    height : 75vw;
}
</style>
<div id="map"></div>
<script>
        function initMap() {
            var uluru = {lat: -25.363, lng: 131.044};
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: uluru
            });
            var marker = new google.maps.Marker({
                position: uluru,
                map: map
            });
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

JSの処理の流れ

まず、以下の部分でGoogleからJavaScriptのソースコードを取得します。

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

読み込みが完了すると、コールバック関数(JavaScript)が実行されます。
「callback=initMap」の部分で指定されている ‘iniMap’ 関数
いかinitMap部分の解説

<script>
        function initMap() {
            //1.緯度経度を設定
            var uluru = {lat: -25.363, lng: 131.044};   
            //2.マップオブジェクトを作成     'map'はHTMLのID名を指定
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: uluru
            });
            //3. マーカーオブジェクトを作成
            var marker = new google.maps.Marker({
                position: uluru,
                map: map
            });
        }
</script>

以下のように表示されれば成功です。

title

title

Macの不要ファイル”.DS_Store” をLinuxコマンドで一括削除

Macの不要ファイル“.DS_Store” をLinuxコマンドで一括削除

findで探してxargsに送ってrmで削除

$ find ./ -name ".DS_Store" | xargs rm

find ファイル・ディレクトリ検索コマンド

引数1 「.」

これはファイルを探す場所、特定のディレクトリを指定する。
ここではカレントディレクトリ「.」を指定

引数2 「-name “.DS_Store”」

これはファイル名を指定

この部分だけを実行すると以下の用にファイル一覧が標準出力へ表示されるのでこのファイル一覧それぞれに対してxargsが「$ rm (ファイル名)」を行っています。

$ find . -name ".DS_Store"
./.DS_Store
./img/.DS_Store
./news/.DS_Store
./news/wp-content/.DS_Store
./news/wp-content/plugins/.DS_Store

実行イメージ

findで検索 → |(パイプ)でxargsへ結果を渡す → xargsは rm を全てに対して実行
(内部的に以下の用に実行される)
$ rm ./.DS_Store
$ rm ./img/.DS_Store
$ rm ./news/.DS_Store
$ rm ./news/wp-content/.DS_Store
$ rm ./news/wp-content/plugins/.DS_Store

(詳細・参考サイト)

http://www.k4.dion.ne.jp/~mms/unix/linux_com/find.html
http://wa3.i–3-i.info/word11619.html

Page 23 of 47

Powered by WordPress & Theme by Anders Norén