粒沢らぼ。

当ブログでは現役生命科学系の研究者が、気になった論文を紹介したり、考えていることを共有したりしています。可能な限り意識を”低く”がモットー。たまに経済ネタとかも。
書いてる人:粒沢ツナ彦。本業は某バイオベンチャーで研究者をやっています。本名ではないです。
博士号(生命科学系)。時々演劇の脚本家、コント作家、YouTube動画編集者。アンチ竹中エバンジェリスト、ニワカ竹中ヘイゾロジスト。
Twitterアカウント:@TsubusawaBio←お仕事などの依頼もお気軽にこちらへ。

カテゴリ: WordPress

前回WordPressのことを書いてからちょっと日にちが空いてしまったが。

Local by Flywheelでローカル環境に作成したWordPressサイト(ローカル環境については過去記事参照)を、契約しているロリポップのサーバーに移行する作業で、引っ掛かりポイントについて書いていたのでした。。

1点目は、PHPのバージョンが古いせいでワードプレスがインストールできなかったと言う問題でした。

2点目は、ローカル環境のWordPressサイトをロリポップのサーバーにアップロードする際に起きる問題。

 

Local環境で作ったWordPressサイトをアップロードする際に、ファイル上限に引っかかってしまう

 

自分の場合は、All-in-one WP MigrationというWordPressプラグインを利用して、ロリポップのサーバーにローカル環境のWordPressサイトをコピーすることを試みた。

 

(なお、ロリポップには簡単引越サービスなるものがあるが、なぜか失敗してこの方法で引っ越しを完了させることができなかった。原因は不明である)

 

ローカルのWordPress管理画面、およびロリポップのサーバー上のワードプレス管理画面からそれぞれAll-in-one WP Migration(以下Migration)というプラグインをインストールした。

ローカルの管理画面から、Migrationプラグインでエクスポートを実行し、ファイルにエクスポートして保存する。

これを、サーバー上のワードプレス管理画面のMigrationプラグインからインポートすれば、サーバーの引っ越しが完了する。

 

だがロリポップ側のWordPressMigrationプラグインのインポート画面には、最大でアップロードできるファイルサイズは8MBであると表示される。

ロリポップにインストールしたワードプレスサイトの初期設定は、どうやら、いちどにアップロードできるファイルのサイズは最大8 MBらしい。

今、アップロードしたいファイルのサイズが70 MBくらいあるので、全然足りない

これもGoogleで検索すると、アップロードできるファイルのサイズ上限を変更する方法がちゃんとある。

 

PASONALロリポップのphp.iniからuploadpost sizeの制限を解除する方法

 

こちらのサイトに記載されているやり方に従って、ファイルのサイズ上限を変更した(ありがとうございます!)。

手順はこのサイトの通りなので詳細は省くが、ファイルサイズ上限を変更するためには、.htaccessというファイルにコードを書き込めば良い。

ただし、.htacessの内容を有効にするためには、ロリポップの管理画面の「PHP設定」から、「php_value, php_flagON」の状態にしてやる必要がある

詳細な理由はわからんが、とにかくそういう作業が必要らしい。

 

続いて、ロリポップの管理画面のロリポップ!FTPから.htacessというファイルを探し、コードの末尾(#END WordPressの上)に、以下の内容を書き込んでやる

 

php_value memory_limit 256M

php_value upload_max_filesize 128M

php_value post_max_size 128M

 

これで、WordPress管理画面のMigrationプラグインの、インポートの画面に戻ってみると…アップロードできるファイルの最大サイズが128MBに増えている


スクリーンショット 2020-06-16 09.05.04

先ほどエクスポートで作成したファイルをアップロードして、引越しを完了させることができた。

 

 

WordPressの管理画面のどこを見ればやりたいことができるか、だいぶ慣れてきた感がある。

困ったときに、検索すればたいていの問題の解決策が出てくるのも良いし、それを見ながらならなんとか問題を解決できることようになってきた。

ちょっと自信が出てきた気がするよ。

知り合いに頼まれていたWordPressサイトの作成・更新の件。

Local by Flywheelでローカル環境に作成したWordPressサイトを、契約しているロリポップのサーバーに移行する作業を行った。(参考過去記事「『固定ページ』と『ローカル環境作業』」)

その際、引っかかりポイントが2点ほどあったので、備忘録も兼ねて一応記録しておきたい。

 

①ロリポップのウェブサーバーにWordPressがインストールできない

ウェブサーバーのロリポップには、「簡単WordPressインストール」と言う機能が付属していて、その名の通り簡単にWordPressをインストールできる、ということになっている。

画面の指示通りに必要なアカウント情報を入力して、クリック数回でWordPressがインストールされるはずだった。

 
kizi18

 

だけれども、何度やっても「インストールが完了できませんでした」という表示が出てしまう。(上記画像そのものはネットからの拾いです。スクショを忘れてしまった)

原因はこういうことでは?というメッセージは出るものの、Web技術に詳しくないので何が何だかわからない。

 

幸い(と言っていいのか)、よくあるトラブルのようで、ネットには先人たちが書き残した対処方法が残されている。

どうやら、かなり古くからロリポップのサーバーを利用していた場合は、内部の設定が古いものになっている場合があり、エラーの原因になるらしい。

今回依頼されて作っていたWebサイトは、数年以上前にロリポップで契約して、WordPressを使っていないサイトとしてはそれなりに長い期間運営していたものだ。

そのため、この条件にバッチリ当てはまる。

ちなみに、契約プランは、最近WordPressが使えるようにエコノミーからライトに格上げした。

 

最初に試したのは、データベースのパスワードを再度登録する方法。

ロリポップの公式サイトに詳しくやり方が載っている。
データベースの現在のパスワードを調べてからパスワード変更を行い、前と同じパスワードを登録し直すというものだ。

これにより、パスワードの形式が新しいものに変更されて、問題が解決することがあるらしい。

だが、これだけでは最終的に改善しなかった。

 

いろいろ調べていて次に気づいたことは、契約しているロリポップのサーバーのPHPのバージョンがどうやら古かったらしい事だ。

ロリポップの公式サイトには、PHPのバージョンの確認方法や変更の仕方も掲載されているので、それに従った。

ロリポップのユーザ専用ページの「PHP設定」で今現在のPHPのバージョンを確認できる。

自分の場合は、ここが5.5になっていた。

詳しい事はよくわからないが、少なくともPHPのバージョンが7.1以上じゃないとインストールできないらしい。

なるほど、確かに「WordPressがインストールできませんでした」というエラーメッセージにも、よく見るとPHPのバージョンがどうのこうのと書いてあった。

もっと明示的に、「PHPのバージョンが古いですよー」とか警告メッセージぐらい出してくれてもよさそうなもんなんですけどね。

 

PHPのバージョンを新しくするには、ロリポップのサーバーのPHP設定画面から選択して設定するだけで良いということだ。

PHP7.3(CGI)“というものに変更。

これによってウェブサイトの動作が変わってしまう場合があるらしいが、自分の場合はこれまで単純なHTMLのサイトくらいしか作ってきてないのでまあ大丈夫だろう。

 

この状態で再度WordPRessのインストールを試すと…今度こそ成功した

なお、最初にやったけど解決には至らなかった、データベースのパスワード変更も、上記ロリポップの公式ページによれば、いずれにせよやらないといけなかった可能性が高い

何はともあれ、WordPressを依頼されていたロリポップのサーバーにインストールすることができた。

 

2点目「アップロードファイルサイズ上限を変更する方法」についてはまた明日書く。

WordPressいろいろ試しているけどよくわからないことがあって。

以下はWordPressをLocal使ってローカル環境にインストールして、Cocoonを入れただけなんですが。

「Next Page」っていうところの色を変えたいとするじゃないですか。

スクリーンショット 2020-06-07 09.31.17

「CSSの追加」っていうところで、最初の状態だとこう↑。

スクリーンショット 2020-06-07 09.27.39

こちらのサイト(WEB-ASHIBI「ページネーション(ページ送り)をカスタマイズ」)のコードを参考にしようと思って、「次のページ」の見た目を変更する部分をコピペするとこんな感じ↑

スクリーンショット 2020-06-07 09.28.00

で、ここからちょっとでも左側のCSSの候補を変える(例えば、色を#49add1から#49add0に変更する)と、こんな感じになって"background-color"のCSSそのものが適用されていない?感じになります。↑
ちなみに、#49add1を一旦消して再度同じ文字を手で打っても同じ。 

コピペしたときだけCSSが有効になっている
謎です。よくわからないっす。
まあ本職のウェブエンジニアになるわけじゃないし、"Next Page"の部分の変更がうまくできなくても俺の人生にそれほど影響ないから別にいっかな、という気もするんだけど…。
気持ち悪いのでわかる方いたら誰か教えてください…。 

昨日(56日)もほぼ一日WordPress

だんだんわかってきた。こういうのはわかってくると楽しい。

やってて気づいた(知った)ことが追加でいくつかあったので書き留めておこう。

 

性質上一枚しかない種類のページは「固定ページ」にすれば良い

 

昨日の記事を書いたときに思ったことだが、カテゴリ分けするのが基本のWordPressサイトの投稿の中で、例えば「自己紹介」のように一回しかやらない投稿もカテゴリ分けするのはおかしい気がしていた。

そういう場合には、「固定ページ」という機能が使えることに気づいた。

 

固定ページは、普通の投稿と似たような性質を持つが、カテゴリやタグで分類されることがない。

したがって、サイトの説明とかプライバシーポリシーのような、一枚しかないような特殊なページの作成に向いている。

 

その代わり、普通の新着記事としては出てこないので、そのページ専用のリンクをメニューなどに作ってやる必要がある。

 

これなら、「一つしかない性質のページのためにカテゴリを作るのか?」という昨日の疑問が解消される。

 

 

ローカル環境で制作作業

 

すでにある程度運営しているサイトをWordPressに移行する場合、サイトが完成するまでは、本番のサーバーはいじりたくない。

そういうときにどうするかというと、一つのやり方としては「ローカル環境(自分のパソコン)にサーバーを立ててそこでウェブサイトを作成し、完了したら本番のサーバーに引っ越す」というやり方があるようだ。

 

こちらのサイト(バズ部)に詳しいが、Local by FlyWheel (“Local”) というアプリを使用すると、自分のパソコンにローカル環境を整備できる。

いったんインストールしてしまえば、あとはほぼ普通のWordPressサイトを制作するのと同じような感じで、人目に触れる心配なくウェブサイトを作成することができる。

 

ウェブサイトの出来を他の人に確認してもらうのも簡単で、確認用のurlを発行できる。

自分のパソコンが立ち上がっていてネットに接続していて、かつ”Local”のアプリで公開をオンにしているときなら、他の人からもネット経由で自分の作ったサイトにアクセスできる。

urlを知っている人に対してはこれでウェブサイトを確認してもらうことができるようだ。

これなら、ウェブサイト作成の依頼主に確認してもらうのも簡単そうだ。

 

というか、最初粒沢は「WordPressを始めるためにはまずサーバーを契約しないといけない」のかと思ってたけど、本当にただWordPressを練習するだけなら、この”Local”さえあれば十分だったな。

お金損したかも。別にいいけど。

 

 

細かいレイアウトの修正…気合?

 

これは気づいたことというほどではないんだけど。

サイトの全体像が見えてくると、ここの余白が気になるとか、ここの色をどうするのが一番しっくりくるかとか、無限に直すところが出てくる。

昨日書いたけど、そういうのは大抵はcssの修正で理論上可能なはず。

ただ、cssのどこを直せば狙った挙動になるのかはわかりにくいことも多く、ハマりだすとものすごく時間かかる。

グーグル検索で出てくるヒントも、参考にはなるんだけど、その通りに直したら必ずしもうまくいくわけでもない。

 

粒沢は、こういうの凝りだすと無限に時間かけてしまうのだけど、程々にしないとなぁ。

 

ぶっちゃけ、特に本業とのシナジーが今後ある気もしないんだよね(我ながらよくやるよな)。
こういうところが器用貧乏で終わる人間という感じがとてもします。 

せっかく色々わかってきたから、後々なんかお金になるとか、いいことないかな…?

連休だしどこにも行けないので、一旦作って放置していたWordPress (Cocoon)の学習を再開することにした。

当初は何もわからなかったが、数時間粘ったら何となく色々わかってきた気がする。
 

せっかくなのでわかりにくいところをメモってみて書き残しておくことにしよう。

あとで人に伝えるときにも役立つかもしれない。

 

 

「子テーマ」を作ってそれを編集する

 

親テーマを編集してしまうと、テーマがアップデートされたときに設定が全部書き直されてしまうらしい。

この辺は色々と説明があるので(例えばこちらのサイトとか)参照。


 

「カード」という概念とカードの種類

 

初期設定で、記事を作成するとトップページに、「画像&記事内容の抜粋」の四角い領域が表示される。この部分が「カード」だ。
最初、この部分の呼び名すらわからなくて、どうやって変更すればいいのかわからなくて困った。 

カードにも形状や配置によっていくつかの種類があり、「エントリーカード」「縦長カード」「タイルカード」などと呼ばれている。

開発者のサイトに詳しい説明がある)

Cocoon設定の「インデックス」から設定できる。

 

 

外観に関する設定の大半は、「外観」ではなく「Cocoon設定」の中で変更する

 

変更したい項目が、「外観」のタブの中から設定するのか、「Cocoon設定」の中で設定するのかが慣れてくるまではかなりわかりにくい。

外観から変更するのは、メインメニュー(グローバルメニュー)の位置や項目、サイドバーの項目くらいと思っていいかもしれない。

 

 

「スキン」は使う必要がない

 

初心者は、ボタン一つで見た目を変更できる「スキン」というものがあるが、正直スキンどれもそんなにいいデザインとは思えない。多少なりともこだわりがあるならば、スキンに頼らず自力で見た目を設定した方が良い。

 
 

見た目の変更は「cssの書き込み」で行う

 

Cocoon設定」には色々と設定できる項目のタブが並んでいるので、見た目(色とか文字サイズとか)を設定できるタブもどこかにあると思いがち。
だが、「全体」のタブで一部のフォントや文字色を変更できる以外は、基本的に「Cocoon設定」からは変更できない。


代わりにcss
に直接コードの書き込みを行うことで、基本的に全ての部分の文字いろや文字サイズ、背景色、仕切り線の有無などの見た目に関する設定が可能だ。

 

「外観」>「カスタマイズ」>「追加CSS」の部分に書き込むことで変更できる。

「外観」>「テーマエディター」でCSS全体を自由に変更できる機能もあるが、初心者にはちょっとわかりにくいので「追加CSS」の方がやりやすい。

 

粒沢はCSSは多少触ったことがあるが、CSSの知識が多少ないとここで詰まりやすいかもしれない。

 

 

グローバルメニューで項目に設定できるのは「カテゴリ」

 

記事をそれぞれカテゴリに分類しておくことが重要。

記事をカテゴリに分類しておくと、グローバルメニューにカテゴリ名を入れることができる。

メニューの内容をクリックすると、そのカテゴリの記事のみが一覧表示された画面に移行する。

 

自分の場合、カテゴリ内に記事が一つしかない場合がある。

例えば、「自己紹介」カテゴリには自己紹介記事が一つあるのみだし、これから増える予定もない。

そういう場合に、いちいちカテゴリのトップに移動するのは何となくあまり賢くない感じがする。

グローバルメニューを「非表示」あるいは「フッターのみに表示」にして、メニューではなく上でのべた「カード」に視線を誘導してメニューがわりにする方がいいのかもしれない。(この辺試行錯誤中)

 

 

***
以上、粒沢の認識が多少不正確なところもあるかもしれないが、現在の自分の認識ではこんな感じだ。

なお、いらすとや の素材を使って、仮で作成したページの外観は今のところこうなっています。
誰かの参考になれば嬉しい。
 

 tsubu-screenshot

このページのトップヘ