旧さびぬき覚書

webを作っていてつまずいた所やその他解決したことを書いたりするブログです。

【wordpress】商品一覧ページを作る　その1

WPのこと

以前作っていた商品サイトをローカルで動かしていたら結構無駄な記述があったので練習がてら整理していました。
せっかくなのでwordpressで商品を登録して、ついでに固定ページを使用した商品一覧ページを作るデモを行います（以前参考にしていたサイトも404になっていたので……）。

実際作っていたサイトはカスタムテーマだったのですが、今回はデモなので無料テーマの「neve」を使用します。

  1. 投稿タイプを作る
  2. タクソノミーを作る
  3. 商品を登録する
  4. 表示の確認

の流れです。

投稿タイプを作る

まずプラグイン「Custom Post Type UI」をダウンロードします。
f:id:sbnk4030:20190416144135p:plain

メニューバーに「CTP UI」が追加されるので「投稿タイプの追加と編集」をクリック。
f:id:sbnk4030:20190416144231p:plain
・投稿タイプスラッグ：products（今回はproductsで統一します）
・複数形のラベル、単数形のラベル：商品（ここもお好きな名前で）
以上で保存するとメニューバーに「商品」と追加されます。

これで投稿タイプが追加されました。


タクソノミーを作る

商品の分類（洋服ならトップス、ボトムス、シューズなどのカテゴリー）を登録できるようにするために「タクソノミー」を作ります。また先程の「CTP UI」から「タクソノミーの追加と編集」へ。
f:id:sbnk4030:20190416150422p:plain
・タクソノミースラッグ：products_category（単数形のほうが理にかなってると思うのですが、今回は最終的にproductsページを作るのでいいかな…と）
・複数、単数形のラベル：商品分類
・利用する投稿タイプ：商品（先程作った投稿タイプ）

これでタクソノミーが追加されました。


商品を登録してみる

以上の2つが追加できたら、新規で商品を登録してみます。
メニューバーから商品▶新規追加
f:id:sbnk4030:20190416144956p:plain
先程追加した商品分類が右側に表示されています。そこに商品に与えたいタグを追加します。
今回は「おもちゃ」と「ぬいぐるみ」を追加。パーマリンクは商品の個別ページのアドレスになるので編集します。
アイキャッチは商品の画像を入れてください。
一旦公開しておきます。

次にメニューバーから商品▶商品の分類　にいきます。
f:id:sbnk4030:20190416145336p:plain
それぞれ名前をクリックして、スラッグ名を上の図のように半角英数字に変更しておきます（スラッグ名が後々アドレスに使用されるため）。

表示を確認してみる

ここまできたら表示されているか確認します。
http://●●●/products_category/toys/ を見てみると、先程保存した商品が表示されていると思います。
商品名をクリックすれば商品の個別ページに飛びます。
f:id:sbnk4030:20190416145637p:plain

これで商品が追加されました。
長くなるので次の記事に続きます。
【wordpress】商品一覧ページを作る その2 - さびぬき覚書

eccube2.13.5でドメインのみ変更する

webのこと

xserverでeccube2.13.5を使用しています。
ドメイン変更のためeccubeをxserver内の別フォルダに引っ越ししました。
基本的には以下のサイトを参考に行いました。
ファイル変更だけ！ECCUBEの本番から開発環境をコピーする手順を解説 | エス技研

FTPでファイルを全部抽出＆新しいフォルダにそっくりそのまま上げます。
DBは、今回は別フォルダに引っ越しだけだったのでいじりませんでした。
config.phpも基本的には変更なしです。

define('HTTP_URL', 'http://'.$_SERVER['HTTP_HOST'].'/');
define('HTTPS_URL', 'https://'.$_SERVER['HTTP_HOST'].'/');

URLの箇所もこうしておけば変更あっても勝手に変わってくれます。

で、引っ越しする際につまづいたのがPHPバージョン。
eccubeの2.13系はPHP7以降で動かない＆xseverで新規でドメイン取るとPHP7.2.6（2019年3月現在）
になってしまうのでうまく動きません。
のでxserverのサーバーパネル▶PHP ver.切り替え▶ドメイン選択▶「変更後のバージョン」を「PHP5.6.36」
に変更します。

これで以前のまま動きました。

Sublime textでcompass導入したらCPU稼働率がおかしくなった

webのこと

web制作する際にはSublime textを使用しています。

今更ですが最近sassを導入して、同時にcompassもインストールしたのですが、
コンテンツがまだ入っていない状態のwebを制作している際に、css書く→ローカル上で確認を繰り返してしばらく（10分ぐらいですかね）していると
「Conversion engine is not responding. Please restart this application.」
なる警告がでて日本語入力ができなくなる上にPCの動きがカックカクになり再起動するしかなくなってしまう、という状況に陥りました。

で、アクティビティモニターでCPU稼働率を監視していると、5分ぐらいで、それまで20%ぐらいだったCPU稼働率が急に80%ぐらいになりそのあとどんどん増えていきました。
その時に見慣れない「sh」というプロセスが8つぐらい出てきたのでこいつらをキルしてみるとCPU稼働率が元に戻りました。
さらにキルした際にsublime textの方のコンソールにメッセージが出てきたのでcompassが原因っぽいなと推測。
そこで検索したら以下のブログが見つかり、筆者はバックエンド的な事に詳しくないのでcompassをアンイストールしたら解決しました。
SublimeText2 - CompassパッケージでビルドするとRubyのプロセスが残ったままファン全開 | matomerge.com

結局SASS Buildを導入したのですが、こちらの方がビルドが早かったので最初からSASS Build選んでいればよかった…。
検索してもあまり引っかからなかったのでご参考まで。

旅行先でfire TV stickのリモコン忘れたけどどうにかなった件

その他

旅行先にfire TV stickを持っていったのですが、本体の事ばかり考えていてリモコンの存在をすっかり忘れ、宿でちょっと絶望しましたが調べて試した所、下記する機材＆情報さえあればなんとかなります。
疑似的に「最後にfire TV stickに繋いだwifi」を作って接続させるってイメージです。

私が持っていたのは以下の物（宿にwifiがあるって前提です）

  • fire TV stick本体（TVにつなぐHDMI端子＆電源）
  • 最後にfire TV stickに繋いだwifiのSSID名とパスワード（重要）


1.テザリングしない方のスマホにfire TVのリモコンアプリを入れます。
アンドロイド版▼
https://play.google.com/store/apps/details?id=com.amazon.storm.lightning.client.aosp

iOS版▼
Amazon Fire TV - AMZN Mobile LLC


2.テザリングする方のスマホで、SSIDとパスワードを「最後にfire TV stickに繋いだSSIDとパスワード」に変更します。
もし最後に繋いだwifiが
SSID:hoge_home
パスワード:hogehoge
だったらそっくりそのまま設定し、テザリング状態にします。

3.fire TV stick本体をテレビに繋ぎます（繋いでいる場合は電源を1回抜いてまた差します）。

4. リモコンアプリを入れた方のスマホに2で設定したwifiを繋ぎ、リモコンアプリを起動します。

5.リモコンアプリで自分のアマゾンアカウントにログインすると「（自分の名前）のfire TV stick」と表示されるのでタップして接続させます。
（ここでログイン後に表示されない場合は2で設定した情報が間違っていると思われます）

6.接続するとTVがアマゾンプライムのホーム画面に移行してくれます。

ここまできたら後はfire TV stick本体側のwifiを宿のwifiに接続→リモコンアプリが入っているスマホも宿のwifiに接続させればOKです。
ただ、リモコンアプリはスマホがスリープ状態になると毎回接続しなおしになるのがちょっと面倒ですね。

追記：テレビ付属のリモコンの十字キーでも動くことがあるそうなのでダメ元で押してみてもいいかもしれません。

Font Awesomeをcssで使う時に表示されない件

webのこと

Font Awesomeのアイコンをcssの疑似要素で以下のように使うと、私の環境だと□になってしまう。

CDN（htmlのhead部分で読み込ませる）

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

css

.hoge::before {
  font-family: "Font Awesome 5 Free";
  content: "\f015";
}

調べたら、一部のフォントのみcssで
font-weight: bold;
とか
font-weight: 900;
とかを指定しないと表示されないとの事で追加したら表示されました。

.hoge::before {
  font-family: "Font Awesome 5 Free";
  content: "\f015";
  font-weight: bold;
}

どうでもいいのですが数字指定の場合、501以上の数値を入力しないと表示されない様子（全て試した訳ではないです）。

【WordPress】function.phpでCSSを読み込む時につまずいた所

WPのこと

以下の記述でfunction.phpでCSSを読み込んだ際にabout.cssだけ
wp-admin/about.min.css
とかいう生成した記憶のないファイルが呼び出されてしまい、「get_template_directory_uri()してんじゃん怒」となりました。

function register_stylesheet() { //読み込むCSSを登録する
    wp_register_style('global', get_template_directory_uri().'/css/global.css');
    wp_register_style('about', get_template_directory_uri().'/css/about.css');
}

function add_stylesheet() { //登録したCSSを以下の順番で読み込む
    register_stylesheet();
    wp_enqueue_style('global');

    if (is_page(array('about'))){
      wp_enqueue_style('about');
    }
    else{
    }
}
add_action('wp_enqueue_scripts', 'add_stylesheet');

結局、'about'の部分を「about_hoge」とかにすることで回避しましたが、
原因がよく分からずモヤッとしています。

All in One SEO PackでのGoogleウェブマスターツール認証の件

webのこと

WPのAll in One SEO Packを設定中に「Googleウェブマスターツール認証」という項目があるのだが、
先にgoogleサーチコンソールに登録しちゃってメタタグどこで確認するんだ？と思ったので覚書き。

●まずサーチコンソールに入り、画像右側の「プロパティ管理＞ユーザーを追加／削除」を選択。
f:id:sbnk4030:20180307144713p:plain

●右上の「プロパティ所有者の管理」
f:id:sbnk4030:20180307144719p:plain

●「別の方法で確認する。」をクリック
f:id:sbnk4030:20180307144723p:plain

●HTMLタグを選択すればメタタグがでてくるのでコピペすればOK
f:id:sbnk4030:20180307144725p:plain