「WordPress」カテゴリーアーカイブ

ショップに KOMOJU を導入してお支払い方法を追加しました

すき 0
0

ショップにPaypay等の決済を追加したく、
KOMOJU という決済代行サービスを導入しました。

Home page

KOMOJU は Steam 等の大手でも導入されているサービスの様です。

利用までの流れ

利用までの流れとしては下記でした。

1 KOMOJU アカウント開設

サイトからメールアドレスでアカウント開設ができます。

Home page

その後サイトの情報など必要事項の設定があります。

2 各種決済の申し込みと審査

Paypayや銀行振込、
申し込み方法によってそれぞれ審査がありました。

特に厳しい審査ではなく問題無くスムーズに終わりました。

確認事項でKOMOJUの担当者さんから連絡がありましたがそれだけでした。
(私の場合は販売品に著作権などの問題がないか、ということでした。)

3 WooCommerce に KOMOJU プラグインのインストール

WP上から可能です。

4 アカウントとの接続設定

WooCommerce → 設定 → 「KOMOJU」タブから接続

テストモードと本番モードを選択して接続する。

最初にテストで接続して動作確認、
問題なかったので次に本番で接続。

特に問題無く本番での接続も完了し、
支払いテストも出来ました。

接続するだけでOKなのでAPIなんちゃら〜とかも無く簡単に出来ました。

追加した支払い方法

今回追加した支払い方法は

Paypay、銀行振込、コンビニ支払い です。

支払いの確認

早速Paypayでテストしてみましたが無事購入処理が完了し、
KOMOJUのダッシュボードにも反映されました。

すごい〜🙌

感想

月額利用料金等も必要無く、
取引ごとの手数料(大体3%前後)なので、
小規模ショップにはものすごくありがたいですね〜〜〜😃

別枠でPaypayとLinePayの方も「加盟店登録」をしましたが
そちらよりも簡単だしスムーズですね。
審査は通りましたがその後の API とかの設定がまた難しいし(´Д⊂グスン

使ってみてまた何かありましたら
記事書こうと思います💎

[SEO対策] AMP プラグイン② テンプレート設定とGoogle Analytics

0
0

今回は表示の調整を行いました。

前回の記事

[SEO対策] AMP プラグインを導入してみた①

リーダーモード:Twenty Fourteen

リーダーモードのテーマを「Twenty Fourteen」にしました。

Reader Mode Themes – AMP for WordPress

 

カスタマイズ、CSS調整

AMP表示確認

通常ページでアドミンバーの「AMP」をクリックするとAMP表示が確認出来ます

カスタマイズ

更にカスタマイズをクリック

AMPページのカスタマイズ

追加CSS

AMPページのカスタマイズからCSSを追加出来ます。

気になるところはCSSで調整。

対応テンプレートの設定

なぜかトップページが無限リダイレクトしてしまうため、
対応テンプレートの設定でトップを除外しました。

Google Analytics

こちらうっかり忘れる所でしたが、
元々テンプレートに直接書いていたため、
AMP用テンプレートには反映されていませんでした。

(気づかず放置するところだった・・)

テンプレートの記述は削除し、
Google Site Kit の方で設置したところ、
AMPページもアナリティクスに反映されるようになりました。

AMP化したらアクセス・PV数が激減した!? 真っ先に確認したいポイントと私のハマった落とし穴 | きもおたねっと。

 

[SEO対策] AMP プラグインを導入してみた①

0
0

モバイルページ高速化のため、AMPプラグインを導入してみました。

AMP – WordPress プラグイン | WordPress.org 日本語

ウィザード

※ スクショは後から撮ったものなので実際の画像と違っている部分があります

テンプレートモードについて

AMPについてはまだよくわかっていない所も多いのですが
ウィザードで「推奨」と表示されている「トランジショナル」でやってみたところ、
盛大に崩れた状態になってしまった。
ページのデザインは同じでJSが効いていない様子。

トランジショナルモードはPCと同じテンプレートでAMP用にヘッダが書き換わるものらしいので、
現状のサイトをAMP用に調整するのは結構厳しい。

ちょっとお手軽にやりたかったので
ウィザードをやり直して「リーダー」モードで選択しました。

WordPress 標準のテンプレート&対応プラグインのみ使用だったら「トランジショナル」で大丈夫なのかも。

リーダーモード

テーマは一旦「AMPレガシー」を選択してみました。

次の記事 で記載していますがその後「Twenty Fourteen」に変更しました。

表示確認

URLに &amp=1 で確認出来ました。

それっぽく表示されている!

AMPテスト

AMP テスト – Google Search Console

AMPテストも問題なさそう

プラグインを入れるだけで自動的にAMPページができてしまいました。

課題:表示崩れ

表示が崩れてしまっているページもあるので
調整を行っていきたいと思います。

次の記事

[SEO対策] AMP プラグイン② テンプレート設定とGoogle Analytics

SEO対策① WebP Converter for Mediaとa3 Lazy Loadで速度アップ

0
0

お父ちゃんからブログの検索順位を上げてくれ〜との依頼がありまして

SEO対策を調べながら頑張って行きたいと思います。

PageSpeed Insights(変更前)

まずは PageSpeed Insights でチェックをしてみました。

PC

モバイル

主にGifが重たいようでした。

対策

とりあえず画像読込を軽くさせる対策を行いました。

① WebP Converter for Media

WebPに変換してくれるプラグイン。

WebP Converter for Media – Convert WebP and AVIF & Optimize Images – WordPress プラグイン | WordPress.org 日本語

Gifアニメは非対応の様子で、変換したら動かなくなってしまった。

なので Gif以外(デフォルト設定のまま)で使用しています。

参考サイト

WordPressサイトの画像をWebPに変換・対応できるプラグイン「WebP Converter for Media」 | ワードプレステーマTCD

② a3 Lazy Load

a3 Lazy Load – WordPress プラグイン | WordPress.org 日本語

こちらもインストールして有効化するだけ、簡単!

(最初 lazysizes を試したけど、プラグインに変更)

テンプレート手動対応

テンプレートに直接書いているimgタグは手作業で修正しました。

通常のimgタグを、

このように修正すればOKです。

参考サイト

a3 Lazy Load: 画像の読込を遅延させてページ表示を速くするWordPressプラグイン | ねたわん

③ その他ファイル

「レンダリングを妨げるリソースの除外」に表示されていたファイルを精査していくつか除外しました。

ウェブフォントも多用していましたが最低限に絞りました。

PageSpeed Insights(変更後)

PC

モバイル

PCの方は結構上がりました。

今回の作業の中では、遅延読込が一番影響しました。

Site Kit

あと直接関係はないですが Google の Site Kit も入れてみました。

WordPress内でアナリティクス等見れるようになり便利です。

 

今後も色々調べて、改善していきたいと思います。

Use-your-Drive(Google Drive plugin for WordPress)を使ってみた

0
0

WooCommerceのダウンロード商品でGoogleDriveを使用したかったので、
WoodPressで初の有料プラグインを導入してみたけど結構便利!

Use-your-Drive | Google Drive plugin for WordPress by _DeLeeuw_ | CodeCanyon

 

商品の所でGoogle Driveのボタンが出来て・・

ファイルを選択可能になります。

とりあえずこれで目的達成ですが
他にもまた色々活用出来たらまたブログに追記します!

 

bbPress & GD bbPress Attachments でフォーラムを設置

0
0

WordPress で運用している当ブログにフォーラムを設置しました。

フォーラム一覧

使用したのは、掲示板を設置出来る bbPress プラグインと、
bbPress に画像投稿機能を追加出来る GD bbPress Attachments です。

設置に当たって行った設定を記録します。

bbPress の設定

設定 > フォーラム

フォーラムユーザー設定

ログインしていない人が書き込み出来るように設定

登録済みの訪問者にフォーラムの役割「参加者」を自動的に付与する
=> チェックを外す

 

フォーラム機能

このあたりは特に変更しなくても良さそうでしたが
「トピックにタグを追加できるようにする」「フォーラムに専属モデレーターをつけられるようにする」が今は必要無いかなと思いチェックを外しました。

GD bbPress Attachments の設定

Global Attachments Settings

Global Attachments Settings
=> 512から1024に変更

Hide attachments
=> チェックを外す
※このチェックがあると、アップロードした画像がログインしていない人に画像が見えない

Image thumbnails size

128 x 72 だったのを 250 x 150 に変更

functions.php

メールアドレスの入力を不要にする

こちらのページを参考にさせて頂きました。

bbPressのメールアドレス任意化をfunctions.phpで行う方法 |

最初、違う方法(空の値をリターンしている?)を参考に行った所、
Mac Chrome では動作確認出来たのですが、
Windows Edge と iPhone Chrome で、
「メールアドレスが不正」といったエラーが出てしまい・・

こちらの方法にしたところ、エラーが解消されました。

IP削除

デフォルトだとIPが表示されていたので、削除しました。

こちらを参考にさせて頂きました。

bbPressで投稿者のIPを削除する方法 – TIPS

GD bbPress Attachments カスタマイズ

GD bbPress Attachments はデフォルトだと、
ログインしていない人は画像がアップロードできないようなので、
こちらを参考に修正しました。

[wordpress] GD bbPress Attachmentsの匿名投稿をONにする方法 – Bluebear I/O

プラグインファイルを直接書き換えているので
アップデートの際は注意した方が良さそう。
(上書きされたらもう一度修正する必要あり)

CSS

css は上書き。好みで色々調整出来そう。

 

WordPress 投稿のパーマリンクに自動的に-2が付けられる

0
0

Slugの末尾に自動的に-2が追加されて変更出来ない事象で困りました。

他の投稿やメディアファイルでも使用しておらず、
DBを確認しても見当たらないので途方にくれていたら、
数字だけのスラッグには自動的に-2がつけられる 
ことが判明 orz

パーマリンクを投稿名にして数字のみの投稿名にすると「-2」が入る | WordPress.org 日本語

Custom Permalinks プラグインで対応

Custom Permalinks

Custom Permalinks プラグインを入れて対応しました。

プラグインをインストール・有効化すると投稿画面の下の方でパーマリンクを設定出来るようになります。
こちらであれば 数字だけのURLやアンダーバーを含んだURLもそのまま表示させることが出来ました ◎

[WooCommerce] 特定のカテゴリでの分岐

0
0

特定のカテゴリーページもしくは、特定のカテゴリを含む商品ページ

という条件分岐メモ

has_term の説明をちゃんと読んでなくて、
has_term( ‘category’ ) だけで動かないな〜〜〜って悩んでたら、
has_term( ‘category’ , ‘product_cat’ )
2番目の引数、「$taxonomy」を設定してなかった・・

is_product_category は WooCommerce 専用のタグ

Conditional Tags – WooCommerce Docs

[WooCommerce] 音楽販売サイトのデザイン変更

0
0

Version 2.0

WELCOME脳トラック販売サイトのデザインを少し変更しました。

テーマは StoreFront を使っています。

記念にスクリーンショットをとっておきます。

Version3.0 [2019]

更に変更してこのようになりました。

トップページ

TOPではサムネイルをフルスクリーンで表示し、
ページ下部にはJavaScriptで再生バーをつけました。

カテゴリページ

カテゴリページのレイアウトは基本的に StoreFront のままで、
ページ下部には再生バーをつけ、
サムネイルをクリックしたら音楽再生出来るようにしました。

商品ページ

商品ページはmp3の埋め込み再生バーを表示しています。

 

まだ少しバグもありますが
そのうち音楽再生カスタマイズのJavaScriptの記事を書こうと思います..。

 

WooCommerceの記事はこちら

https://homemadegarbage.com/wordpress-woocommerce

 

Polylang & Lingotek Translation で WordPressブログを多言語化してみた

0
0

お父ちゃんがハックスターなど海外向けの記事を書いているので、折角だからブログも多言語化したいな〜と思い実装してみました。

( …集中線付けてみました。集中線追加ツール )

プラグイン選び

参考にさせて頂いたサイト

WordPressサイトをグローバルに多言語対応する方法 | ワードプレステーマTCD

1記事に対して複数記事を作成出来るとのことで qTranslate X も良いかと思いましたが、最終更新日が3年前となっており、
また
・停止のときに少し面倒
・重い
という面もあるらしいので、Polylang にしました。

※ qTranslate X についての参考記事
qTranslate-Xの使用をやめて停止する方法【更新停止が問題点】

Polylang にした理由

Polylang は、インストール後のプラグイン設定画面で促される Lingotek Translation というプラグインをインストール・有効化することで、クラウドによる自動翻訳が可能になります。
自動翻訳を生成後に必要な箇所を手直ししてアップする形が簡単で良さそうと思いました。

また、他プラグインとの干渉も少なくトラブルが少ないようなのでそこも安心材料でした。

導入・設定

Polylang の設定

Polylang をインストール、有効化します。

設定についてはこちらが参考になりました
サイトの多言語化に便利なPolylangプラグイン | 西沢直木のIT講座

重要な設定
まずデフォルト言語である「日本語」を作成して、既存記事をデフォルトの言語に設定する

これを逃すと後で設定が大変になるそうです。

Lingotek Translation の設定

Lingotek Translation のインストールを促す表示がページ上部に表示されているので、有効化する。

アカウント登録

有効化するとアカウント登録画面が表示されるので、登録する。
そういえばここでパスワードの設定がちょっと謎でした。
入力するパスワードによって「○分待つ必要がある」といったメッセージが表示されて(翻訳文のうろ覚え)、登録ボタンが押せなかったり。
検索してもよくわからず、仕方ないので分数が短いパスワードを選んで登録しました。
(前にもどこかでこうゆうの見たことある気がするけど・・)

登録してインストールが完了するとメニューに「Translation」が表示されます。

言語の追加

「英語」は インストール前に Polylang の設定から追加したのですが、Lingotek Translation からも言語の追加が出来ます。
ZH-CNを作成しましたが国旗が設定されなかったので、国旗は Polylang の設定の方で設定しなおしました。

Translation > Dashboard

プラグイン > Polylang [設定]

カテゴリなどの翻訳設定

カテゴリーとタグはデフォルトではDisabledになっているので Manual に変更しました

Translation > Manage

多言語用に必要なカテゴリは翻訳しておく必要があります。
(日本語のカテゴリは使えません)

事前に翻訳済みだと、記事の翻訳時に自動的に対応カテゴリを付与してくれます。
対応カテゴリが無い場合はカテゴリは外れます。

Lingotek Translation で翻訳

記事の翻訳

「記事一覧」画面に、言語の国旗とマークが追加されています。

まずは日本語国旗の下のアップロードボタンを押します。

処理中の表示に変わります

完了するとオレンジのプラスボタンになります

翻訳したい言語のプラスボタンをクリックします

処理中の表示に変わります

完了するとダウンロードボタンになるので、クリックします

しばらくすると翻訳元の記事の前後に、翻訳された記事が生成されます。
(画面がリロードされるので、過去記事だと一瞬行方不明になります。)

この後は手動で直して行きたいので、記事下の「Disassociate translations」をクリックします

リロードされ、「Disassociate translations」の表示がなくなります

翻訳作業でちょっと注意事項は、ボタンを押して処理が終わるたびにリロードされるので、過去記事だと元の画面に戻るのが少し大変だったりします。

翻訳された記事の修正

カテゴリについて

カテゴリなどの翻訳設定 にも記載しましたが、カテゴリを事前に翻訳しておいた場合は対応するカテゴリが付与されます。

カテゴリの翻訳方法

カテゴリの翻訳方法については、記事と同じです。
カテゴリ一覧画面で同様の翻訳作業を行っていきます。

アイキャッチについて

アイキャッチは外れるので、設定し直す必要があります。
これももしかしたらメディアが翻訳済みの場合は対応するメディアがセットされるのかもしれませんが、
画像は日本語と同じものを使用したいので設定しなおす運用にします。

注意事項

「言語」設定をいじると、記事の連携がとれて戻せなくなるので、ここはいじらないほうが良いようです。

サイトに翻訳メニューを表示する

ウィジェットから追加する

ウィジェットから追加可能になります。
「言語スイッチャー」が追加されています。

外観 > ウィジェット

タグで追加する

ヘッダはウィジェット管理していないのでタグで追加しました。

上記は
・国旗とタイトルの表示
・カレント言語は表示しない設定
に設定にしています。

公式ドキュメントにその他設定についても記載されています。

Function reference | Polylang

残課題

Crayon Syntax Highlighter のコードも翻訳されてしまうので、回避方法はないか?

翻訳精度について

お父ちゃんによると、正しい日本語で書いたような文章だと結構良い感じで翻訳されるらしいですが、フランクな感じだと難しいそうなので書き直しているそうです。

イービルの記事を翻訳してみましたが・・中国語のタイトルすごい。

https://homemadegarbage.com/zh/evil-magic-3

黑暗之王!!
色々翻訳してみたくなりました。

追記:多言語化廃止(2022.2.11)

多言語ページを廃止することにしました。

サイトの高速化を図るため PageSpeed Insights でトップページをチェックすると
英語URL(https://homemadegarbage.com/en/)にリダイレクトされてしまう様子。

英語圏なら自動的に英語TOP(/en/)が表示されてしまうということなのかな?

久々に確認すると、最新記事は2019年のまま止まっていた・・・

多言語ページに強制リダイレクトされてしまう状況は逆に良くないのでは・・?
それならコンテンツの多い日本語TOPを表示してGoogle翻訳で読んで貰った方が良さそう・・。

というわけでプラグインを停止することにしました。

廃止手順

ヘッダから記述削除

プラグインの無効化

Polylang と Lingotek Translation を無効化

とりあえずこれだけで廃止は完了です。

翻訳記事は残る

翻訳記事は通ワードプレス内に残るので安心です。

M5Stick-Car

 

カテゴリの整理

各言語用のカテゴリも残されていて重複して表示されたりするので整理。

WooCommerce:商品ページに noindex を指定する

0
0

商品ページに Meta robots noindex を指定する方法を調べたので記録。

参考ページ

WooCommerce:決済画面の住所入力を非表示にする

0
0

デジタルコンテンツ販売であるため、住所入力は必要無いと思い非表示にしました。

※まず、Storefont の子テーマを作った上でカスタマイズします。

子テーマを作成した記事はこちらです:
WooCommerce : Storefront の子テーマを作成 – WordPress – Home Made Garbage

function.php 

function.php に下記を記述しました。

「会社名」はあったほうが良いとかと思い、billing_company の箇所だけコメントアウトしています。

表示

デフォルトの項目

変更後

参考

こちらを参考にさせて頂きました。

Remove Address Fields in WooCommerce Form Checkout | WP Beaches

WooCommerce : Storefront の子テーマを作成

0
0

Storefront の子テーマを作成しました。

Storefront の子テーマについて

公式サイトでおしゃれな子テーマも販売されています。
Storefront Themes – WooCommerce

無料のものもあるようです。

表示側はちょこちょこ自分でカスタマイズしていきたいと思ったので新規で子テーマを作成することにしました。

子テーマ作成

ディレクトリ作成

WPのテーマディレクトリに、storefront-child ディレクトリを作成します。

フォルダ名は違うものでも問題ありませんが、storefrontの子テーマであることが分かりやすい名前をつけました。

ファイル作成

作成した storefront-child ディレクトリの中に、下記の2ファイルを作成します。

  • style.css
  • functions.php

style.css 

style.css に下記を記述して保存します。

  • Theme Name:テーマ一覧に表示される名前でなんでも良い
  • Template:親テンプレートを指定

functions.php

functions.php は空のままでも大丈夫です。

これで storefront の子テーマが作成出来ました。

テーマ適用

WP の外観 > テーマ を確認すると作成したテーマが表示されています。

「ライブプレビュー」で問題無いことが確認出来たら「有効化」します。

これで storefont 子テーマが適用されました。

カスタマイズする際は storefront のテーマではなく、子テーマの方で変更していきます。
( storefront の header.php に変更を加えたい時は、storefront/header.php を 子テーマ内にコピーし、子テーマの header.php に変更を加えるようにします。)

WooCommerce:Stripe の設定・注文テスト

0
0

WordPress + WooCommerce で音楽販売サイトを作成しました。

WordPress + WooCommerce で デジタルコンテンツ販売のECサイトを作成

今回は Stripe の設定と注文テストについての記録です。

Stripe の設定

エンドポイントの設定

  1. WooCommerce > 設定 > 決済 > Stripe の 「管理」をクリック
  2. 「Stripe アカウントの設定」 をクリック
  3. Stripe にログイン
    * Stripe を初めて開いた時の設定は覚えておらず省いています
    ( WooCommerce インストールの際の設定画面で「Stripe」を選択したので、アカウント自体は作成されていたような気がします。初回ログイン時は住所など色々設定があった気がしますがスクリーンショットをとっておらず記憶がおぼろげ。)
  4. 「エンドポイントの追加」をクリック
  5. WPのStripe設定画面(2.)に表示されているwebhook エンドポイントをコピペし「エンドポイントを追加」
    4.の画面(Webhook)に追加されます。

APIキーの設定

  1. Stripe の APIキー
    「本番環境のキーを表示」をクリックして表示させる
  2. WPの WooCommerce > 設定 > 決済 > Stripe
    ・ライブ公開可能な鍵に APIキー(2.の画面)の「公開可能」
    ・ライブ秘密鍵に 「シークレットキー」 
    を設定し、ページ下部の「変更を保存」

注文テスト

テスト用APIキーの設定

  1. WP の WooCommerce > 設定 > 決済 > Stripe 
    「テストモードを有効化」にチェックを入れる
  2. Stripe の APIキー
    「テストデータを表示する」をONにし、「テスト用キーを表示」をクリックして表示させる
  3. WP の WooCommerce > 設定 > 決済 > Stripe (1. の画面)
    ・テスト用公開可能な鍵に APIキー(2.の画面)の「公開可能」
    ・テスト用秘密キーに 「シークレットキー」 
    を設定し、ページ下部の「変更を保存」
  4. 支払い画面
    クレジットカードがテストモードになり、テストが可能になる

テスト

注文受付画面

注文処理を実行後の画面

注文完了メール

メールも届く

WPで注文の確認

WP の WooCommerce > 受注 

注文をクリックすると詳細を確認出来る

DL数の確認やファイルへのアクセス権の管理も出来る

レポート画面

期間を絞っての確認や商品別、カテゴリ別など色々確認出来る

Stripe で注文を確認

Stripe 上でもテストデータを確認出来る

テストモードを元に戻す

テスト完了後は WP と Stripe で テストモードを解除する

  1. WP の WooCommerce > 設定 > 決済 > Stripe 
    「テストモードを有効化」のチェックを外し、ページ下部の「変更を保存」
  2. Stripe の APIキー
    「テストデータの表示中」をオフにする。(左側のメニューからでも可)
  3. 支払画面のカードの表示が元に戻る

 

ざっと記録用で雑で申し訳ないです。
それにしてもWooCommerce と Stripe で無料でここまで出来るというのはすごいですね。

WordPress & WooCommerce で 音楽販売サイトを作成

0
0

WordPress & WooCommerce で音楽販売サイトを作成しました。

WooCommerce について

プラグインは WooCommerce にしました。

販売するコンテンツはデジタルデータだけだし機能もシンプルな方が良いと思ったので、最初は Easy Digital Downloads で作成してみたのですが、デフォルトの決済方法は PayPal で、クレジットカード対応するためには別途有料アドオンが必要でした。

クレジットカード決済には Stripe を利用したいと思い、Stripe Payments for WordPress – WP Simple Pay といった無料のプラグインもあるのですが、なんとなく決済画面は同一であってほしかったので見送り。

WooCommerce は日本語の情報があまり多くないようで、デジタルコンテンツの販売はどうなっているのか、Stripe との連携はどうなのか、細かい所はよくわからなかったのですが、とりあえず試してみることにしました。
(プラグイン説明には、デジタルコンテンツ販売も可能であること、デフォルトでクレジット決済可能なことが表記されています。)

使ってみた所「必要なことはすべて出来るし使いやすい!」と感じているので WooCommerce にして良かったです。

※補足
Stripe についてはこちらのページなど参考になりました。
カード決済システム【Stripe】が超便利だったので比較&レビューしてみた!|CrossPiece

WooCommerce インストール

プラグインを追加し、有効化

設定を開くと設定ウィザードが開きました。
そのまま設定していきましたが、後からの設定も可能なようです。

  1. ショップの設定
    情報を入力
  2. 支払い方法の選択

    スクリーンショットが漏れてしまいましたが、とりあえず PayPal と Stripe の2つを選択しました。(PayPal は結局使わず、あとから連携プラグインをオフにしました。)
  3. おすすめ
    とりあえずチェックをしたまま「次へ」進みました。
    ・StoreFont は WooCommerce の 公式テーマなので、あとで子テーマを適用するとしてもまずはONにして進めた方が良いと思います。
    ・MailChimp は使わなかったのであとでプラグインをオフにしました。
  4. 有効化
    接続してみたところ、Jetpack のログイン画面が開きました。
    HomeMadeGarbage で作成したアカウントがあるのでそれにログインしました。


  5. 準備完了

インストール後、サイトの初期状態

カートとか出来てる!

WooCommerce 設定

WooCommerce > 設定

  1. 一般
  2. 商品 > 一般
    ※ ショップページは最初「ショップ」と表示されていますが、固定ページのにある「ショップ」のタイトルを変更しました。
  3. 商品 > 在庫
    とりあえず無効化していますが買い取り用楽曲追加の際には有効化しようと思っています。
  4. 商品 > ダウンロード商品

  5. 税 > 税オプション
  6. 税 > 標準税率

  7. 税 > 軽減税率 率
    未登録
  8. 税 > 免税 率
    未登録
  9. 決済
    Stripe だけON
    ※ Stripe は別途、Stripe のサイトで設定が必要
  10. アカウントとプライバシー
    あまり個人データを扱うのは怖いのでアカウント登録機能はオフにしました。
    「個人データを保持する」設定は最小値の1を設定しました。
  11. メール
  12. 高度
    設定そのまま(いじってない) 

 

色々作業があってまとめきれてないのですが記録用として作業内容の記事など書いていきます。

RaspberryPi サーバ & WordPress ブログ を XSERVER に サーバ移転

0
0

先日の北海道地震の停電で、ラズパイ自宅サーバで運用しているこのブログも数日間ダウンしてしまいました。
「そのうちドメイン取得してレンタルサーバに移行しようか〜」とは考えていましたが、これを機に移行をすることにしました。少し名残惜しくはありましたが。

XSERVER

色々調べてみるとXSERVERは費用も手頃だし高機能ということだったので XSERVER を契約することにしました。
10/31まで ドメイン無料キャペーン(なんとサーバ契約継続中は維持費無料!)も実施されており調度良いタイミングです。

プランは X10 にしました。

移行手順

1. XSERVER契約 & ドメイン取得

15日の試用期間があるのでXSERVERの初期ドメインで動作確認をしようかとも思いましたが、初期ドメイン から 独自ドメイン に移行する際には再度FTPでDLし直さなきゃダメそうなので、試用期間は使わず即契約、キャンペーンドメインの申し込み。

  1. 申し込みページから申し込み
  2. InfoPanelの「料金のお支払い」から支払いを済ます
  3. InfoPanelの「キャンペーンドメイン」からドメイン申請

5分もしないうちに完了メールが届きました。

2. ドメイン設定

こちらを参考にServerPanel でドメイン設定。

(無料独自SSLを使用するにチェックしましたが新規ドメインのためか失敗したのであとで追加します。)

3. WordPressの移行

最初は こちら を参考に進めていましたが
今回はドメインも変更になっているので、WPはXSERVERで新規インストールし、必要なデータをアップロードし、DBだけ差し替える形で移行してみました。

既存環境(Raspberry Pi)

  1. SSHで現在の公開ディレクトリをまるごとダウンロード
  2. phpMyAdmin でデータのエクスポート

新環境(XSERVER)

WordPress 自体は XSERVER からインストールしてみることにした。

  1. 簡単インストールから新規DBでWPをインストール
  2. プラグインをアップロード、有効化
    (現在お世話になっているプラグイン)
    All In One SEO Pack
    amazonjs
    crayon-syntax-highlighter
    pz-linkcard
    revision-control
    simple-local-avatars
    TinyMCE Advanced
    wordpress-popular-posts
    yet-another-related-posts-plugin
  3. テーマのアップロード、適用
    ここまでは正常!空の状態でサイトが表示された
  4. uploads ディレクトリ以下をアップドード

DBの移行

簡単インストールで作成したDBは phpMyAdmin でいじれない様子。

  1. DBを新規作成して、エクスポートデータをインポート
  2. とりあえず、管理画面のURLだけデータ直接変更
    wp_options(siteurl、siteurl)
  3. 新規作成したWordPressの DB情報 を変更(上記のDBに差し替える)
    wp-confg.php

できたー!
無事管理画面に入れてデータも確認。

その後の対応

■SSL対応

SSL設定 > ドメイン選択 > 独自SSL設定の追加
独自SSL設定の追加完了

「無効なURLです。プログラム設定の反映待ちである可能性があります。しばらく時間をおいて再度アクセスをお試しください。」と表示される。

ここで一旦就寝。
翌日になると無事 https://homemadegarbage.com で表示されている。
簡単…感動。

管理画面から https にURLを変更。

■記事データのURL置換

Search Regex  をインストール。

http://homemadegarbage.com/ > https://homemadegarbage.com/ に置換。

■301リダイレクト

Nginx の設定で、リダイレクトの追加。

 return 301 https://homemadegarbage.com$request_uri;

 

最初は下記を追加したが、URLが正常にいかなかった。

http://homemadegarbage.0t0.jp/pov-sphere08 が、 https://homemadegarbage.com/?q=/pov-sphere08 になる。

 

㊗ .com ! ㊗ https !! 🙌 

そしてラズパイサーバ今までありがとう…🙌

WordPress のカスタムフィールドをグループ化して復数追加可能にする( Custom Field Suite プラグイン)

0
0

ショップサイトを作りました。

https://homemadegarbage.com/shop/

作成するにあたって、記事に以下ののように情報を登録していきたいと思い、

調べてみたら Custom Field Suite というプラグインが無料でカスタムフィールドグループの入れ子が可能だったので使用させて頂きました。

フィールドの追加

プラグインをインストールすると「フィールドグループ」メニューが追加されます。

フィールドグループを「新規追加」します。

「フィールドを新規追加」し、名前を入力、「新規フィールドを追加」します。

ラベル、名前を入力し、親グループの容れ物を「ループ行」で作成します。

「フィールドを新規追加」し、子グループの容れ物も同様に「ループ行」で作成します。

親グループ、子グループに必要な項目を追加していきます。

項目の登録が終わったらページ右側の「公開」を押します。

項目が閉じられ、ループ行の下には青いラインが表示されます。

項目をドラッグして並び替えし、入れ子状態を作ります。

このような表示になります。

配置ルールや表示順序などの設定が出来ます。デフォルトだと本文下に表示されます。

設定を終えたらページ右側の「公開」を押します。

投稿画面

投稿画面の下に作成した項目が表示されています。

「追加」ボタンを押すと項目が追加されました。

「追加」ボタンで、親グループ、子グループを復数追加できます。

ドラッグ&ドロップで並べ替えも簡単です。

テンプレート

自動保存はされない

カスタムフィールドは自動保存されないようなので登録中はこまめに保存した方が良さそうです。お父ちゃんが登録中に長男君が激突してきてブラウザの戻るボタンが押ささってしまいデータが消えたと嘆いていました。

Nginx + WordPress : ファイルアップロード上限の設定

0
0

php.ini の修正

post_max_size を変更する

upload_max_filesize を変更する

php の再起動

この時点でWP上には「最大アップロードサイズ: 20 MB」と表示されたけど、アップロードすると「HTTP エラー」になる。

「マルチファイルアップローダー」ではなく「ブラウザーアップローダー」の方で試してみると、「Nginx 413 Request Entity Too Large」と、Nginx のエラーが出ている。

Nginx の設定

Nginx 設定ファイル変更

http の中に client_max_body_size 20M; を追加

Nginx 再起動

????

参考にさせて頂きました

WordPress で「もっと見る」を実装(プラグイン無し)②

0
0

前回の作業に追加しました。

WordPress で「もっと見る」を実装(プラグイン無し)

対応状況

対応済

  • TOPページ
  • カテゴリアーカイブ
  • 検索結果(日本語結果が微妙な気がする、要検証)

未対応

  • 月別アーカイブ

いずれ対応したい

  • 自動スクロール

jQuery

PHP

もっと簡潔に記述したいものだけど…

 

PHP7.0にアップデート 中に気付いたけど、WPのデバッグモードがONになっていると動作しない。

Nginx : WP運用中の公開ディレクトリ名変更

0
0

Nginx の設定変更

ディレクトリ名変更

構文チェック

nginx再起動