WordPress

WordPressにアップロードできるファイルサイズを変更する方法

ファイルをアップロードするとエラーが出る

画像をアップロードしようとしたところ、
このサイトのアップロードサイズ上限を超えています。
というエラーが出てしまいました。

  • 環境
    • Ubuntu 18.04 LTS
    • Nginx
    • PHP 7.2

原因1:Nginxのデフォルト設定

原因1はNginxのデフォルト設定で、POST最大サイズが1MBまでになっているためです。
設定ファイルを書き換えて変更します。

原因2:PHPのデフォルト設定

原因2はPHPのデフォルト設定で、アップロードできるファイルサイズが2MBまでになっているためです。
こちらも設定ファイルを書き換えて変更します。

原因1 解決方法:Nginxの設定ファイルを編集する

Nginxの設定ファイルを編集します。

$ cd /etc/nginx/
$ sudo nano nginx.conf

http {
     (-中略-)
     client_max_body_size 50M;
     #includeの前に上の1行を追記。この場合上限50MBになる。
     include /etc/nginx/conf.d/*.conf;
     (-中略-)
}

$ sudo systemctl restart nginx

原因2 解決方法:PHPの設定ファイルを編集する

PHPの設定ファイルを編集します。

注意点

設定するサイズは以下の大小関係を満たしてください。
memory_limit>post_max_size>upload_max_filesize

$ cd /etc/php/7.2/fpm
$ sudo nano php.ini

#以下の設定項目を検索して変更する。

upload_max_filesize = 25M
#アップロードできるファイルサイズの上限。この場合25MBになる。

post_max_size = 50M
#POSTできるファイルサイズの上限。この場合50MBになる。

memory_limit = 256M
#PHPが使えるメモリサイズの上限。この場合256MBになる。(初期値の128Mでも良いらしい。)

$ sudo systemctl restart php7.2-fpm
$ sudo systemctl restart nginx

この2点を変更することで、エラーが出ずにアップロードできる様になるはずです。
お疲れ様でした。

Ubuntu Server 18.04 LTS Nginx環境でWordPressのパーマリンクを使う

Ubuntu Server 18.04 LTS でNginx環境でのWordPressパーマリンク設定を備忘録としてまとめておきたいと思います。

404エラーが出る

WordPressのパーマリンク設定を基本から変えると404エラーが出てしまいます。
これに対応するための設定です。

Nginxの設定ファイルを編集する

$ cd /etc/nginx/sites-available
$ sudo nano default

#以下の一行を検索しコメントアウト
#try_files $uri $uri/ =404;

#コメントアウトした次の行に以下の一行を追記
try_files $uri $uri/ /index.php?q=$uri&$args;

$ sudo systemctl restart nginx

ウェブブラウザでWordPressのパーマリンク設定を変更し、記事にアクセスできれば完了です。
お疲れ様でした。

Ubuntu Server 18.04 LTS WordPress インストール

時間が流れるのは早い

新年明けてからバタバタと過ごしてブログ更新をサボっていたら3月になってしまいました。時間が流れるのは早いと感じているところです。

今日は過去に書き溜めていた記事を公開します。

本題はここから

※注意!
この記事はWordPress5.xのリリース前に書いたため、4.9.8でのインストール手順となっております。

Ubuntu Server 18.04 LTS でのWordPressのインストールを備忘録としてまとめておきたいと思います。

今回の環境

WordPressのダウンロード

WordPress公式サイトからダウンロードリンクをコピーしておきます。

$ cd /var/www/html
$ sudo mkdir www.hoge.hoge
$ cd www.hoge.hoge
$ sudo wget https://ja.wordpress.org/wordpress-4.9.8-ja.zip

ダウンロードしたファイルを解凍

$ cd /var/www/html/www.hoge.hoge
$ sudo apt install unzip
$ sudo unzip wordpress-4.9.8-ja.zip

#wordpressフォルダが作られる
$ ls

パーミッションと所有者・グループを変更

$ cd /var/www/html/www.hoge.hoge
$ sudo chmod 775 -R wordpress

#www-dataはNginxのユーザを設定
$ sudo chown www-data:www-data -R wordpress

Nginxの設定ファイルを編集する

$ cd /etc/nginx/sites-available
$ sudo nano default

#以下の一行を検索しコメントアウト
#root /var/www/html;

#WordPressをインストールしたディレクトリを追記する
root /var/www/html/www.hoge.hoge/wordpress;

#index.phpを追記する
index index.html index.htm index.nginx-debian.html index.php;

$ sudo systemctl restart nginx

Adminerを一時的にWordPressフォルダに入れる

Adminerインストールの過去記事はこちら
Ubuntu Server 18.04 LTS Adminer インストール

$ cd /var/www/html
$ sudo cp adminer.php /var/www/html/www.masa10.hoge/wordpress

AdminerでWordPress用のデータベースを作成

ウェブブラウザで”サーバ名/adminer.phpにアクセス

MariaDBのユーザ名とパスワードを入れてログインする。

データベースを作成をクリック

空欄に任意のデータベース名を入力
照合順序は”utf8_general_ci”を選択

データベース作成ができました

WordPressのインストール

ウェブブラウザで”サーバ名”にアクセス

さあ、始めましょう
をクリック

先ほど、Adminerで作成したデータベース名など、データベースに関する情報を入力する

データベースに接続できると、この様な画面になるので
インストール実行をクリック

WordPressに関する情報を入力します。
入力後、”WordPressをインストール”をクリック

インストールが完了しました。
ログインをクリック

ログイン画面になるので先ほど設定したユーザ名とパスワードでログインします。

ダッシュボード画面になればWordPressインストール完了です。

【重要】一時的に入れたAdminerを削除する

Adminerを誰でもアクセスできる状態にしておくのは、セキュリティ的に問題があるので削除します。

$ cd /var/www/html/www.hoge.hoge/wordpress
$ sudo rm adminer.php

以上でWordPressのインストール完了です。
お疲れ様でした。

MastodonウィジェットをWordPressに正しい方法で読み込ませる

以前紹介した方法ではまたエラーがでた

以前のブログ記事
Mastodonのウィジェット
で紹介したMastodonのウィジェットでしたが、また違うエラーが出てしまい動かなくなったので、修正方法をまとめたいと思います。

エラーの内容

トップページでは表示されるが、2ページ目以降に移動した時にウィジェットが表示されなくなるという状況でした。

Chromeでのエラーの内容は
Failed to load resource: the server responded with a status of 404
というエラーで、CSSファイルとJSファイルを見失っている状態でした。

エラーが発生する設定方法

ダウンロードした3つのファイル(CSS・JSファイル)をWPがインストールされているディレクトリ直下に置き、その後、Insert Headers and Footersプラグインでヘッダー内にマストドンウィジェット作成ウィザードで生成された1つ目のコードを記述するという方法でした。

エラーが発生しない正しい読み込ませ方

WordPressでCSSやJSを読み込ませるにはfunctions.phpに関数を用いて記述する方法が正しいようです。

まず、ファイルの置く位置を変更します。
自分はwp-contentの下にmastodon-widgetというディレクトリを作ってそこに3つのファイル(CSS・JS)を入れました。

次に、外観-テーマの編集からfunctions.phpに以下を追記します。
以下は記述例です。URL等個々の環境に合わせて変えてください。

function twpp_enqueue_styles() {
	wp_enqueue_style( 'mastodon-widget-css', '/wp-content/mastodon-widget/mastodon.widget.css' );
}

add_action( 'wp_enqueue_scripts', 'twpp_enqueue_styles' );

function twpp_enqueue_scripts() {
	wp_enqueue_script( 'mastodon-widget-js','/wp-content/mastodon-widget/mastodon.widget.js' );

	wp_enqueue_script( 'mastodon-widget-jp-js','/wp-content/mastodon-widget/mastodon.widget-jp.js' );
}

add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );

wp_enqueue_style関数は
wp_enqueue_style( ‘スタイル名’, ‘CSSまでのURL’ );
wp_enqueue_script関数は
wp_enqueue_script( ‘スプリクト名’, ‘JSまでのURL’ );
で書かれています。
スタイル名・スプリクト名は他と被らないようにしてください。

最後に、Insert Headers and FootersプラグインのHeaderの記述欄に、マストドンウィジェット作成ウィザードで生成された1つ目のコードのうち、4行目以降の

<script>
jQuery(document).ready(function() {
から
</script>

までを記述します。

サイドバーに表示させるには、外観-ウィジェットのページでカスタムHTMLを使いマストドンウィジェット作成ウィザードで生成された2つ目のコードを記述します。

以上でエラーなくMastodonウィジェットをWordPressで使うことができます。