WordPress|メディアファイルのアップロードサイズ上限を変更する ロリポップの場合

画像や動画をWordPressにアップロードする際

「このサイトのアップロードサイズ上限を超えています」

と表示されることがあります。

細かい解説は抜きにして、サクッと上限を変更しましょう。

ロリポップで変更する場合

①ロリポップ!FTPにアクセス

ロリポップ!FTPをクリックすると、各ドメインのデータを保存するフォルダ一覧が表示されるので、該当するフォルダを開きます。

②.user.iniファイルがあるかチェック

これは手動で.user.iniファイルを追加したものです。

ドットから始まるのでおそらく上から2番目に表示されます。

そこになければファイルを新規で作成します。

③.user.iniファイルを作成

フォルダを移動せずに上の画像の新規ファイル作成ボタンを押します。

ファイル名

.user.ini

ファイルの内容

upload_max_filesize = 32M
post_max_size = 64M
memory_limit = 128M

とし保存するボタンをクリックします。

このように.user.iniファイルが作成されていればOKです。

FFFTPで変更する場合

メモ帳に

upload_max_filesize = 32M
post_max_size = 64M
memory_limit = 128M

と記載しファイル名を.user.iniで保存してください。

そのファイルを該当ディレクトリに保存すればOKです。

Max Mega Menu|MobileNavで2つのメニューを扱う

こんにちは、日々Wordpressと格闘しているまなびや~んです。

今日はWordPressの優秀なMegaMenu(メガメニュー)プラグイン、Max Mega Menuを拡張してみます。

まずはやった内容について説明します。

MobileNavigation with Mobile
MobileNavigation with PC

図を見てもらえれば分かる通り、まずはPCでもMenu表示をMobileNavigationにしています。

これは画面上部をすっきりさせるためで、やってみたら想像以上に良かったです。

それと、上部に2つのメニューがあるの分かりますか?

たぶんこれ、標準機能だとできないはずです。

理由はこれ、

Toggle Bar Designerでトグルバーにメニューの表示方法を設定できるのですが、このTOGGLEに設定できるメニューは1つのみ。ここにもう一つTOGGLEを張り付けることができますが、その中身は同じものとなります。

なぜならこのプラグインの仕様は、上のテーマ1つにつき1つのメニューを割り当てる方式だからです。

もしTOGGLE1つ1つにメニューを割り当てることができれば実現可能だったと思いますがどうやら無理なようです。(有料版ならできるかもしれませんが試していません)

ここで紹介する方法を試してもらえば上画像のように左右に異なるメニューを割り当てることができるようになりますのでぜひ試してみてください。

1.Menuを作成する

まずは使用するメニューを2種類作成しましょう。

方法は【外観】【メニュー】-新しいメニューを作成しましょうの順に進みます。

作成出来たらMax Mega Menuの設定をします。

ですがその前に、上の画像【メニュー項目を追加】の下にあるEnableにチェックをつけてください。

これをしておかないとMaxMegaMenu側で割り当てることができません。

2.Max Mega Menu ~Menu Locations~

まずわかりやすいように、左に表示するメニューをDefault、右に表示するメニューをMyAccountと仮定します。

①.Defaultのテーマを設定

やることは2つ、Enabledにチェックをつけ、ThemeにDefaultを選択し【変更を保存】します。

②.もう一つのテーマを作成

下の【Add another menu location】をクリックし名前を入力、Enabledにチェック、ThemeにMyAccountを選択し保存します。

これで2つのメニューの外枠が出来上がったと考えてください。

詳細は次です。

2.MaxMegaMenu ~Menu Themes~

ここではPCでもモバイルメニューを使用しているため、MobileMenuのみ解説をさせてもらいます。

他の設定については改めてググってください。

①PCでもモバイルメニュー

これは特に難しいことはありません。

MobileMenuが表示される条件であるウィンドウ幅を設定すればOKです。

MaxMegaMenu MobileMenu Responsive Breakpoint

上のResponsive Breakpointの値以下になればMobile Menuが表示されるので、思惑となる幅を設定してみてください。ここでは3000pxに設定することでPCでもモバイルメニューが表示されるようにしています。

Toggle Bar Designer

②ToggleBarDesigner

簡単にトグルバーデザイナーの役割を説明します。

MaxMegaMenuはWordpressのメニューコンテナに自身を置き換えています。

その時に上の図のように、3つのパートに分かれたToggleBarを配置します。

それぞれ、左・中・右のエリアにメニューを割り当てることが可能です。

ここまでは簡単で便利な機能ですよね?

さて、このToggleBar、1つしか配置できません。

イメージとしてはトグルバーの左と右にそれぞれメニューを割り当てることができればやりたいことは実現できそうです。

ですがこのToggleBarには今、Defaultのメニューを割り当てているためMyAccountのメニューをこのトグルバーに表示することはできません。

MyAccountも同時に表示しようとするともう一つのToggleBarが必要になります。

ですが先ほど述べたように、1つの画面には1つのToggleBarしか表示ができない仕様となっています。

ということでテーマ自体をいじっちゃおうってことです。

その前にもう一つのメニューMyAccountについても同要員設定しておいてください。

ここでは詳しく解説しませんが、気が向けばのちに詳細を載せます。

3.メニューの配置

作った2つのメニューのうちDefaultのメニューはメインメニューとして規定で設定されています。

なので新しく作ったMyAccountのメニューを配置しましょう。

【外観】【ウィジェット】【Max Mega Menu】で【フッター1】(赤丸の部分)を選ぶと右のフッターウィジェットエリアに【Max Mega Menu Widgets】が字配置されます。

図のようにMenu LocationにMyAccountを設定するとフッターエリアにMyAccountのメニューが表示されることになります。

ここで注意なのですが、フッターエリアに配置したのはダミーであり実際には表示されないことを覚えておいてください。

それはまたのちに設定します。

3.テーマのカスタマイズ

これで今2つのメニューが完成しています。

それらが使えるようにテーマをカスタマイズしていきましょう。

①テーマでMaxMegaMenuを表示できるか?

テーマによってはこのままではデフォルトメニューの中にMaxMegaMenuが格納されてしまいます。

それを回避するために、まずデフォルトのMenuを表示しないようカスタマイズします。

https://www.megamenu.com/documentation/removing-residual-styling/

上のリンクを参考に、ピンク色の部分を削除するかコメントアウトします。

②メニューを2個並べるコンテナの作成

自分が使っているテーマの場合、モバイル用メニューはmobile-navのコンテナでくくられていました。

なのでこれをコピーして自前のコンテナ”original-mobile-nav-container”に格納して並べることで先に示したメニューが出来上がります。

(表示の細かい設定はカスタムCSSです)

①モバイル用メニューの設定を変更

先ほどMaxMegaMenu用に変更した個所を使用しているテーマに合わせてカスタマイズします。

分からなくなった場合はwp_nav_menuを検索し、該当箇所を探してください。

(必ずバックアップを取ってください。意味が分からない方はここでやめましょう。)

上の図を開設

 1.モバイル用メニューをコピーして並べる

 2.それをoriginal-mobile-nav-containerでくくる

②CSSで成形

3番目のメニュータイトルを消す部分は使用環境に合わせて変更してください。

※注意

テーマをアップデートすると消えてしまうので子テーマでカスタマイズするかバックアップを取るようにしてください。

時間がないので以上で終了させていただきます。

ご質問等あれば以下にどうぞ!

(コメント欄あったかな? 笑)

必須アイテム|Max Mega Menuで保存ができない時は

プラグイン_Max Mega Menu

WordPressの便利なプラグインMax Mega Menuは本格的なサイトではなくても使ってみるととても便利なPluginです。

ですが一般的な環境【ロリポップ】+【Wordpress】の環境だとおそらく100%つまづきます。

Max Mega Menuで保存できないトラブル


Max Mega Menuの Menu Themesへの変更が保存できない!

標準設定のままだとMaxMegaMenuのMenuThemesへの変更が保存できない場合があります。

試しに標準でインストールされるテーマ「Twenty-Twenty」にMaxMegaMemuのプラグインのみを有効化した時の動きを確認してみました。

すると、何度保存をしても保存されていないことに気が付きます。

MenuThemesの変更を保存できない原因はWAF

WAFとはWebApplicationFirewallのことで、WEBアプリケーションへのファイアウォール機能です。

具体的にはサーバーへの悪意のある変更やハッキングに対してのファイアウォールといえばわかりやすいかもしれません。

しかし中にはプラグインの設定変更などでWAFがブロックしてしまう場合がしばしばあります。

MaxMegaMenuもその一つで、ロリポップとの組み合わせの場合、初期状態でWAFがサーバーへの変更をブロックします。

ロリポップのWAFがMaxMegaMenuをブロックしたログ
ここまで気が付かないとは・・・

このように、変更をブロックしたログがロリポップに残されていました。

MaxMegaMenuを有効にするには?

WAFを一時的に解除することでもMaxMegaMenuの設定の変更は保存できますが、他からの攻撃も受けてしまう恐れがあるためお勧めできません。

無効にすると変更をブロックしなくなる

なのでもう一つの確実な方法をご紹介します。

WAFへの例外ルールの設定

WAFのログを確認すると、MaxMegaMenuをブロックしたログが出力されているのが確認できます。

その時のシグネチャIDをWordpressの.htaccesに例外として記述することでサーバーへの変更を許可することができるようになります。

ロリポップのWAF設定

WordpressのWAFログの確認方法

左のメニューの【セキュリティ】タブからWAF設定を選びます。

右にドメイン一覧が表示されるので、該当するドメインを選択します。

ただしこの時、Wordpressに設定しているWordpressアドレスもしくはサイトアドレスを確実に選びます。具体的に言うと、www有りで設定している場合はwww.hogehoge.comといったwwwサブドメイン付きのドメインを設定しなければ機能しません。

WAFのログを参照

ドメイン右の【ログ参照】ボタンを押してみてください。

そこにはWAFがブロックしたログ一覧が出力されています。

数が多くどれがMaxMegaMenuのログなのかわからない場合は、もう一度MaxMegaMenuで保存ボタンを押すとログが作成されるのでそれが該当するログとなります。

おそらく【xss-try-4】がMaxMegaMenuのログだと思われます。

MaxMegaMenuのWAFログ

赤線の部分がシグネチャIDとなるのでコピーしておいてください。

.htaccessへの記述

このシグネチャIDをWAFに例外として登録するために、.htaccesファイルに次の文を記述します。

SiteGuard_User_ExcludeSig xss-try-4

最後のxss-try-4の部分は該当するシグネチャIDを書きます。

これを.htaccessファイルに書き込む手順は

上のロリポップ!FTPをまず開き、開いたウィンドウの該当するドメインをクリック。

するとフォルダが展開されるのでその中の.htaccessをクリックします。

ここで一応注意ですが、こういうファイルを触るときはバックアップを取ることや、余計な変更をしないなど細心の注意をもって扱ってください。

<IfModule mod_rewrite.c>

</IfModule>

の間に記述すれば機能しますが、</IfModule>のすぐ上に記述するほうがいいかもしれません。

【保存する】をクリックして保存しますが、ウィンドウはまだ閉じないでください。

第2の罠

実は続きがまだあります。

MaxMegaMenuのWAFによるブロックには2つあるんです。

おそらくMaxMegaMemuではWAFに引っかかる変更を2つ行っています。

1つ目の変更でWAFに動作をブロックされているため2つ目の変更は未実行となりログには残されていません。

今1つ目の動作を例外として登録したので、MaxMegaMemuの2つ目の変更がWAFでブロックされるようになりました。

それがこれです。

ロリポップのWAFログでMaxMegaMemuの2つ目のログ

このシグネチャIDを先ほどと同じように.htaccessに記述します。

SiteGuard_User_ExcludeSig xss-try-4
SiteGuard_User_ExcludeSig sqlinj-55
</IfModule>

すると

この通り保存できるようになりました!

追記

個の記述方法だと動的に上書きされてしまうことがわかりました。

赤の下線をよく読むと分かりますが、私が記述していた部分は何を追記しても初期化されてしまう部分でした。

それを防ぐために、#BEGIN WordPressよりも上の行、黄色い枠で囲まれた部分を追記するように変更しました!

まとめ

Max Mega Menuはとても便利なプラグインです。

初心者の方にはそれほど簡単ではないかもしれませんが、手順を追えばそれほど難しくはないので頑張ってみてください。

それと、くれぐれも.htaccessファイルを触るときは細心の注意でお願いします。