Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / アーカイブwordpress

2018年2月16日 By KD コメントを書く

WordPressサイトの表示が遅い場合の対処法

WordPressサイトの表示が遅い場合の対処法

WordPressを使い始めるとキャッチ画像などを毎回設定したり、分かり安くするために画像多めの記事を作ってみたりと、気づかない内に画像を多用してしまいます。それ自体は良いとしても、画像をそのままWordPressにアップロードしてしまうと表示速度の低下という問題が発生してしまいます。今回は、WordPressサイトの表示が遅い場合の対処法を紹介します。

表示速度を測定してみる

自分のサイトが遅いかどうかは客観的な数字で判断するしかありません。感覚的に遅いなと思うことはありますが、それが個人の感覚なのか、一般的な感覚なのか分からないからです。

今回はGoogleのPageSpeed Insightsを使って客観的な表示速度を見てみることにしましょう。

このブログの表示速度はどうでしょうか?

スクリーンショット 2018 01 17 22 37 58

スクリーンショット 2018 01 17 22 38 11

結果はなかなか厳しい数字が出てしまいました。モバイルの表示速度はまあまあだとしても、パソコンの表示速度は明らかに致命的な遅さだと分かります。正直自分でもこのブログは遅いと思っていたので納得の結果です。

WordPressプラグイン「Imsanity」を用いた対処法

それでは、表示速度を改善していきましょう。

PageSpeed Insightsの分析結果によると、大きい画像が多数含まれていることが大きな原因として挙げられていました。

そこで、画像のサイズ変更に適したWordPressのプラグイン「Imsanity」を使って画像サイズを最適化していきます。このプラグインは設定すると、今後アップロードした画像を全て指定したサイズに自動的に変更してくれます。加えて、一括変換機能を使うことで、過去にアップロードした画像のサイズ変更も行えます。

まずは「Imsanity」をWordPressにインストールして有効化して下さい。

Imsanity
Imsanity
Download QR-Code
Imsanity
Developer: Exactly WWW
Price: Free

次に、設定画面から「固定ページ/投稿でアップロードされた画像」を最適なサイズに変更します。私のブログの場合は横幅600pxで収まるレイアウトになっているので、「最大の幅」を「600」に、「最大の高さ」を「0」に設定しました。

スクリーンショット 2018 01 21 18 52 41

これで、今後アップロードした画像はこのサイズに自動的に変更されるようになりました。

これはこれで便利ですが、今回の目的はすでにアップロードした画像を縮小することです。同じ設定画面の下の方を見ると、一括設定の場所がありますので、「画像を検索」を実行してみましょう。

すると、今までアップロードした画像一覧が表示されます。後は、サイズを変更したい画像を選んでチェックを付けましょう。

そこまで終わったら、「選択した画像のサイズを変更する」をクリックすると、選択した全ての画像の画像サイズが変更されていきます。

スクリーンショット 2018 01 21 18 52 28

「リサイズの完了」が表示されれば、終了です。

注意点として、この一括変換は、変換された画像は後で元に戻せません。なので、心配な人はバックアップを取ったり、最小限の画像だけ選択するなりして、安全に行って下さい。

結果

それでは、画像サイズを小さくしたことで表示速度が改善されているか確認してみましょう。

スクリーンショット 2018 01 21 18 57 01

スクリーンショット 2018 01 21 18 57 12

結果は、モバイルは80点で十分な表示速度だと評価されています。問題だったパソコンの表示速度は、完璧では無いですが、致命的な遅さからほどほどの表示速度に改善されたことが分かります。

その他の対処法

今回はすでに実施済みでしたが、WordPressのメモリ上限を上げることで表示速度は改善します。必要な方は以下の記事を参考にして下さい。

WordPressのメモリ上限を上げる方法

最後に

いかがでしたか?よくこのブログに遊びに来てくださる方々は、表示速度が改善されていることに気づいたのでは無いでしょうか?明らかに速くなりましたからね。表示速度を改善したい方は参考にしてみて下さい。

カテゴリ : ライフハック タグ : wordpress

2018年1月22日 By KD コメントを書く

WordPressのメモリ上限を上げる方法

WordPressのメモリ上限を上げる方法

WordPressでいろいろプラグインを入れているとメモリが不足してくることがあります。表示が遅くなったり、場合によっては真っ白な画面になったりしてしまいます。今回はそんな時にメモリ上限を上げる方法を紹介します。

WordPressのメモリ上限の書かれたファイル

それでは設定ファイルから見ていきましょう。

WordPressのメモリ上限の書かれたファイルは「default-constants.php」です。

Xserverの場合は、「ドメイン名 -> public_html -> wp-includes -> default-constants.php」にあります。

スクリーンショット 2018 01 15 23 31 20

WordPressのメモリ上限の設定値

WordPressのメモリ上限の設定値は以下の2種類あり、それぞれ目的が異なります。

WP_MEMORY_LIMIT

  • PHPが使用するメモリの上限を決める値
  • デフォルトは40MB(シングルサイト)、64MB(マルチサイト)
  • 「Allowed memory size of xxxxxx bytes exhausted」のようなエラーが発生している場合は上げる必要がある

WP_MAX_MEMORY_LIMIT

  • 管理者タスクを実行時に、PHPが使用するメモリの上限を決める値
  • デフォルトは256M
  • 通常は管理者タスクはメモリを多く使うため、WP_MEMORY_LIMITより大きい値を設定する

詳しくはwordpress.orgの公式サイトを参照して下さい。

WordPressのメモリ上限を上げる

それでは実際に設定値を変更してみましょう。今回は、通常のシングルサイトだと仮定して、控えめにWP_MEMORY_LIMITを96MBに変更してみましょう。

    // Define memory limits.
    if ( ! defined( 'WP_MEMORY_LIMIT' ) ) {
        if ( false === wp_is_ini_value_changeable( 'memory_limit' ) ) {
            define( 'WP_MEMORY_LIMIT', $current_limit );
        } elseif ( is_multisite() ) {
            define( 'WP_MEMORY_LIMIT', '64M' );
        } else {
            define( 'WP_MEMORY_LIMIT', '96M' );
        }
    }

    if ( ! defined( 'WP_MAX_MEMORY_LIMIT' ) ) {
        if ( false === wp_is_ini_value_changeable( 'memory_limit' ) ) {
            define( 'WP_MAX_MEMORY_LIMIT', $current_limit );
        } elseif ( -1 === $current_limit_int || $current_limit_int > 268435456 /* = 256M */ ) {
            define( 'WP_MAX_MEMORY_LIMIT', $current_limit );
        } else {
            define( 'WP_MAX_MEMORY_LIMIT', '256M' );
        }
    }

上記の色がついている所が設定値で、6行目がWP_MEMORY_LIMIT(マルチサイト)、8行目がWP_MEMORY_LIMIT(シングルサイト)、18行目がWP_MAX_MEMORY_LIMITになります。今回の場合はシングルサイトですから、8行目を40M -> 96Mに変更すれば完了です。

最後に

いかがでしたか?WordPressをある程度使いこなしてくるとどうしてもメモリ上限を上げる必要が出てきます。エラーが出ても焦らずに対処しましょう。

カテゴリ : ライフハック タグ : wordpress, xserver

2018年1月19日 By KD コメントを書く

WordPress上でBitcoinで寄付を募る方法

WordPress上でBitcoinで寄付を募る方法

Wikipediaなんかを見ていると毎回寄付してくれという表示が出ますよね。あれはかなりうざいわけですが、その甲斐があってか、Wikipediaの寄付金は年に約5000万ドル(約60億円)にも達するそうです。 すごい額ですね。Wikipediaにはお世話になっているので、たまには「運営資金にどうぞ」という感じで寄付をする人は少なくないということでしょう。そんな仕組みをBitcoinで日本の自分のWordPressブログに導入する方法を紹介します。

なぜBitcoinで寄付を募るのか?

個人の寄付を募るなら電子決済でしたいですよね。銀行口座を晒すなんて今時できませんし、アプリを使わなきゃいけない個人間送金はブログに貼るには不向きですし、気持ち程度の寄付のためにクラウドファンディングのサービスを使うのは違うだろという感じがします。

PayPalの寄付が違法な件

そこでまず思いつくのがWikipediaなどでやっているPayPalによる寄付です。

最初は私も「寄付ボタンでも付けたら面白いかなー」と言うかなり軽い気持ちでPayPalなどを利用できる寄付ボタンを設置しようとしていたのですが、実はここには落とし穴がありました。

なんと世界的にメジャーなPayPalの寄付ですが、日本では資金決済法という法律で禁止されているらしく、PayPalのシステム上でも日本での寄付ができないようになっていました。犯罪防止のためとかそんな理由ですかね。仕方がないのでこの方法は却下です。

だったらBitcoinでやってみよう

そうなってくると次に思いつくのがAmazonギフト券なんですが、その場合は金額がギフト券単位なので、寄付してくれる人が金額を細かく設定する自由度がありません。自分のイメージではもっと自由な金額設定で投げ銭する感じで寄付してほしいのですよね、このブログには。いいねボタンを押すイメージに近いです。

まあどんな記事でも1時間以上は作成に時間がかかっているわけで、ブログを読んだ後に、「良い記事だったしスタバのコーヒー一杯奢ってやるよ」的なノリがベストです。もちろん、高級レストランで奢ってくれてもいいですよ(笑)

そこで思いついたのがBitcoinです。今旬ですし、設定してあるだけでも面白いですよね。さすがに投資としてBitcoinをやるのはギャンブルに近いので止めておくにしても、簡単な決済や個人間送金に使うには適していますし、私の場合は海外にいるので日本円で寄付してもらったとして海外への送金は手間ですし、不要な手数料も取られてしまいます。それに税金に関しても、Bitcoinによる寄付は贈与にあたるようなので仮に日本円に変換したとしても110万円までは非課税です。まさかそんな大金を寄付してくれるようなかっこいい人はなかなかいないでしょうからね。

WordPressにBitcoinの寄付を設定する

それでは設定していきましょう。

BitcoinのWalletを作成する

まずは寄付してもらったBitcoinを入れるWalletを作成します。
とは言ってもやることは専用のサイトに行ってアカウントを作るだけです。

今回はBlockchainで作りました。

ここは自由なので、他のWalletでも良いですし、すでに持っているのであれば新しく作る必要はありません。

GoUrlのアカウントを作る

GoUrlはBitcoinなどの仮想通貨を売買するためのゲートウェイサービスです。ゲートウェイサービスというのは、他のサービスなどと連携するためにキーを発効して安全に仲介してくれるサービスのことですね。

https://gourl.io/

対応している仮想通貨は以下になります。

スクリーンショット 2018 01 13 20 28 52

  • Bitcoin
  • BitcoinCash
  • Litecoin
  • Dash
  • Dogecoin
  • Speedcoin
  • Reddcoin
  • Potion
  • Feathercoin
  • Vertcoin
  • Peercoin
  • UNIT
  • MonetaryUnit

それではGoUrlのアカウントをまずは作成しましょう。

GoUrlのサイトに行き、「ACCOUNT」から人間であることの確認をします。

スクリーンショット 2018 01 13 21 00 15

その後でregisterで登録できます。

スクリーンショット 2018 01 13 21 01 23

後はよくあるメール認証があるので、メールに書かれているリンクをクリックすれば完了です。

WordPress上でGoUrlのWordPressプラグインを入れる

次に以下の「GoUrl Bitcoin Payment Gateway & Paid Downloads & Membership」という名前のWordPressプラグインをインストールします。

GoUrl Bitcoin Payment Gateway & Paid Downloads & Membership
GoUrl Bitcoin Payment Gateway & Paid Downloads & Membership
Download QR-Code
GoUrl Bitcoin Payment Gateway & Paid Downloads & Membership
Developer: GoUrl.io
Price: Free

設定は後でしますが、以下のGeneral SettingsのコールバックのURLをメモして下さい。

スクリーンショット 2018 01 13 22 07 26

GoUulのサイト上でPayment Boxを作る

GoUrlのサイトにログインして、My Accountにある以下の「Your Cryptocoin Payment Box / Captcha」から「Create New Payment Box for Your Website」をクリックします。

スクリーンショット 2018 01 13 21 11 52

すると以下の画面が表示されるので、一つ一つ入力していきます。

スクリーンショット 2018 01 13 22 00 48

  • Payment Box Name: 任意
  • Coin Name: bitcoin
  • Type of Payment Box: payment box
  • Your External Wallet Address: 自分のWalletの受信用のアドレス
  • Notification By Email: 自分のメールアドレス
  • Callback URL: GoUrlのWordPressプラグインのGeneral Settingsに記載してあるYour Callback Url(先程メモしたURLです)
  • Use on Adult/Gambling Website ? 普通のサイトならNo
  • Verifying it’s you: 上に記載したメールアドレスに確認用のコードを送信し、メールアドレスの入力ミスがないか確認する

ちなみに、「Your External Wallet Address」ですが、Blockchainの場合はDASHBOARDの「受信」をクリックすると。

スクリーンショット 2018 01 13 22 06 24

受信用のURLを確認できるので、コピーして貼り付けます。

スクリーンショット 2018 01 13 22 06 39

あとは左上の「Save」をクリックすれば完了です。

完了すると、先程の画面でPublic KeyとPrivate Keyが表示されていますので、メモして下さい。

スクリーンショット 2018 01 13 22 15 38

WordPress上でGoUrlの設定をする

ここでWordPressに戻ります。

GoUrlプラグインのGeneral SettingsのBitcoin Paymentsにある以下のPublic KeyとPrivate Keyの欄に、先程GoUrlのサイトでメモしたキーをそれぞれ入力して、「Save Settings」で保存します。

スクリーンショット 2018 01 13 22 16 11

「Bitcoin (BTC) payments are active!」と表示されれば完了です。

GiveのWordPressプラグインを入れる

以下の「Give」という名前のWordPressプラグインと、GoUrl用のGiveアドオンである「GoUrl Bitcoin Paypal Donations – Give Addon」というWordPressプラグインをインストールして有効化します。

GiveWP – Donation Plugin and Fundraising Platform
GiveWP – Donation Plugin and Fundraising Platform
Download QR-Code
GiveWP – Donation Plugin and Fundraising Platform
Developer: GiveWP
Price: Free
GoUrl Bitcoin Paypal Donations – Give Addon
GoUrl Bitcoin Paypal Donations – Give Addon
Download QR-Code
GoUrl Bitcoin Paypal Donations – Give Addon
Developer: GoUrl.io
Price: Free

GiveのWordPressプラグインにBitcoinを設定する

Giveのプラグインの設定をしていきましょう。

まずはSettingsのPayment Gatewaysから、「Enable Gateways」で「Gourl Bitcoin/Altcoin」を選択します。

スクリーンショット 2018 01 13 22 49 48

次に、Emailsから、寄付してくれた相手に送信されるメールを設定します。これは任意ですが、しておいた方が良いです。

スクリーンショット 2018 01 13 22 53 08

そして、Generalから、Currencyメニューを選び、「Currency」を「Cryptocurrency – Bitcoin (BTC)」を選択します。「Number of Decimals」も多めにしておいた方が良いでしょう。なぜなら1BTCは現在価格で130万円くらいするからです。少数が無いと誰も寄付してくれません。ただ、動作確認をした結果、BTCに関しては小数点は4までが正確に動く最小値でした。5にしてみたらBTC0.00001を選択して処理した際に、支払画面でBTC1.00000という恐ろしい表示になっていました。これには注意が必要です。

スクリーンショット 2018 01 14 13 37 43

サイドバーに寄付用のウィジェットを設定する

やっと最後のセクションまで来ました。後少しです。

GiveのAddFormから、新しいDonation Formを作成します。ここはあまり細かい説明をしても仕方ないので、実際に編集してプレビューしてみると良いと思います。WordPressで記事を書く時の似たような感じで作成できます。完成したら「公開」しましょう。

スクリーンショット 2018 01 13 23 41 20

一応、Form Displayの以下の項目を設定しておくと良いでしょう。SettingsでDefault Gatewayは設定済みなので不要かもしれませんが、念のためです。

スクリーンショット 2018 01 14 12 49 44

今回は寄付用のウィジェットを設定しようと思いますので、「外観 -> ウイジェット」から、「Give – Donation Form」を選択して設置します。ここの動きはテーマによって多少異なるかもしれません。

スクリーンショット 2018 01 13 23 29 04

そして「保存」すると、サイドバーに以下が表示されました!

スクリーンショット 2018 01 14 13 45 59

試しに「寄付する」のボタンを押してみて下さい。以下のように確認画面が出ます。ここでFirst NameとEmail Addressを入れて「寄付する」を押して下さい。このFirst NameとEmail AddressはGatewayを使う場合は必須のようなので、適当に入れて下さい。入れておけば後で自分が寄付した履歴が見れます。

スクリーンショット 2018 01 14 13 45 28

すると、以下のようにBitcoinを送信するためのQRコードとアドレスが表示されます。あとはこのアドレスにBTCを送れば寄付は完了です。

スクリーンショット 2018 01 14 13 24 04

皆様の寄付を心よりお待ちしております!!

おすすめのビットコイン取引所

もしこの記事を読んでいてビットコインを持っていない方は以下の取引所から購入できます。

  • GMOコイン
  • BITPOINT
  • QUOINEX
  • bitFlyer
  • Zaif

こだわりがなければ全部のアカウントを作っておくというのもよいと思います。

寄付の際に登録する個人情報に関して

私のブログに対してBitcoinの寄付をして頂く際に登録されたお名前やメールアドレスは、寄付して頂いた方が後で自分がした寄付の履歴を確認するために使用されます。それ以外の目的では使用されません。

最後に

いかがだったでしょうか?Bitcoinは投資をするには時期尚早ですが、最近ではBitcoinで買い物ができる店も増えているので持っておいて損はありません。まだ持っていない人はこの機会に調べてみてはどうでしょうか。また、入金のテストをしたいので、どなたかサイドバーの「BTC寄付」から「BTCのテストに協力する」をしてもらえると嬉しいです。ではまた。

カテゴリ : ライフハック タグ : bitcoin, donation, wordpress

  • « 前のページ
  • 1
  • 2
  • 3
  • 4
  • 5
  • 次のページ »

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
    バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~
    AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~
  • [tips][Windows] Windows Updateを一括で行う方法
    [tips][Windows] Windows Updateを一括で行う方法
  • 初級JavascriptフルスタックエンジニアのためのReactとExpressの同時開発チュートリアル(基本的なアプリ作成と同時開発環境構築編)
    初級JavascriptフルスタックエンジニアのためのReactとExpressの同時開発チュートリアル(基本的なアプリ作成と同時開発環境構築編)
  • [tips][Sublime Text] Sublime Text 3で文字化けしない方法
    [tips][Sublime Text] Sublime Text 3で文字化けしない方法
  • オブジェクト指向の基本原則「SOLID Principles」からプログラミングの基本を学ぶ
    オブジェクト指向の基本原則「SOLID Principles」からプログラミングの基本を学ぶ

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes