Simplicity2カスタマイズ・モバイル表示のみを変えたい時の基本phpファイルまとめ

simplicity_logo

こんにちは。WordPressテーマ「Simplicity」大好きの部長ナビ(@nabi_1080)です。日々カスタマイズ頑張っております!

今朝、トップページを大きく変更しましたが、それに伴いグローバルメニューの表示をやめたため、モバイルの表示が変わりました

スポンサーリンク

当ブログのスキンは「ラージピクチャーヘッダー」

部長ナビのページは、Simplicityの「ラージピクチャーヘッダー」を使用しております

今回、gori.me同様の「タイトルロゴ右に主要カテゴリリンクを表の形状で作る」ことに成功しましたが、コレをやると、モバイルの表示が弱くなります

Ptengineのヒートマップのデータ収集のため、「付いてくるメニュー」をやめた

付いてくるメニューは一見良い感じがしますが、上下の表示幅が狭くなるのと、そのメニューを常に必要とする人はあまり多くないことがわかりまして、さらに、g.O.R.iさんに教えていただいた「Ptengine」というヒートマップアクセス解析サービスにおいて「どこがクリックされたか」を表示する関係で、メニューが動くのはデータ収集において「良い」とは言えませんでした

どこがクリックされているのか、グローバルメニューが妥当なのか、よくわかりませんでしたし、gori.meでも「付いてくるメニュー」はありませんから、実際に使い方をg.O.R.iさんに教えていただいた時「固定表示でデータを取ると、色々わかるんだなぁ」というのを実感したので、今回、可動メニューを廃止したというわけです

なお、Ptengineについては、とあるプランを使わせていただいている関係もあり、後に記事としてちゃんと紹介しますので、Ptengine使ったこと無いよーという方、9月頭くらいで1ヶ月のデータが集まるのでもう少しお待ちください

モバイル表示のみをカスタマイズする時の基本「is_mobile関数」

今回、必ず抑えなければいけないのが「is_mobile関数」と言う関数です

これは「モバイルの時だけ、この表示をしてね」という関数でして、これがメッチャ使えます

具体的には、この2行でコードを挟む感じです。これでイケます

後は「ブチ込む場所」だけわかれば、全然イケるんですけど、ググってもなかなか「Simplicityにおけるキモのファイル」を教えてくれるサイトが少ないので、今日成功したので、私が紹介することにしました

参考にどうぞ!

スーパー基本「コードカスタマイズは、FTPアプリで行う」

成功するかどうかよくわからないことを素人がやる場合は、「WordPressの管理画面で「外観」→「テーマの編集」からコードをいじることをやってはいけない」ことを知りましょう

コードのことを理解しているちゃんとした方は全然構いませんが、私のような素人がやる場合、かっこが1つでも抜けていると、ブログ全体が表示不可能になり、管理画面すら表示されなくなります

この「管理画面が表示されない」ってのがポイントで、要するに「修復不可能」になる可能性が高いので、色々カスタマイズをする時は、基本的にFTPアプリを使いましょう

ちなみに、Chromeにある、何とかモードは、私、よくわかってないので使ってません。FTPアプリでちょっとずついじりながら様子見てカスタマイズしてます

ですから、2時間くらいやって、「うわあ・・・ダメだ・・・」って事も良くあります。そんなにカスタマイズ、ウマく行きません。根気よく、FTPアプリでやりましょう

Simplicityで親テーマをのファイルを子テーマにForkLiftで移す方法〜子テーマでカスタマイズ!〜
Simplicityで親テーマをのファイルを子テーマにForkLiftで移す方法〜子テーマでカスタマイズ!〜
こんにちは。WordPress初心者の部長ナビ(@nabi_1080)です。日々カスタマイズ頑張っております! さて、Simplicityの...

↑私はg.O.R.iさんオススメの「ForkLift」を使っています。高いですけど、メッチャ使いやすいですよ。なお、コード用のエディタは「CotEditor」を使ってます

当ブログで紹介しているカスタマイズでコードの扱いを失敗して「管理画面が表示されなくなった」としても、自己責任でお願いしますね。このドキドキ感もカスタマイズの醍醐味です

モバイルの表示をウマくやっていくのは、次の4つのファイルをいじる

1 footer.php(私は子テーマに移動)

一番下。Simplicityだと「黒の強いグレー」で表示される部分ですね

ここが、PCとモバイルで表示が違うという方は多いと思いますが、「外観」「ウィジェット」で「フッター・中」とかに、モバイル用テキストウィジェットを追加してもダメでした

で、仕方ないので、is_mobile関数を使って、footer.phpにコードをブチ込んだら、こんな感じになりました

image

↑この、フッター(グレーの部分)の4つのメニューがfooter.phpに記述した「is_mobile関数」によるものです。一番下のコピーライトもいじることが可能です

2 home.php(親テーマ)

これ、親テーマなので、危険です。細心の注意を払ってください。まあ、子テーマに持っていっても良いと思いますが、何でもかんでも子テーマに持っていくとバージョンアップした時に表示が崩れます。今のウチのブログがその状態で、最新のSimplicityのアップデートを使えない状態なので(理由もわからない)、基本、子テーマにあるファイルで地味に色々いじるのが良いと思いますねぇ

home.phpは、モバイル、PC両方の「トップページ」を司るファイルのような気がして、試しに入れたら成功しましたので、ハッキリ言って、よくわかってません

image

↑マネさんに必ず言われる「Twitterのタイムライン表示を残して欲しい」という要望。Twitterのアカウントを持たず、けど、ツイートは見たいという読者から根強い人気のあるタイムラインです。ですから、サイドバーに移動してみたんですがスクロールできなくなり、マネさんに話したら「スクロールして欲しい」と言うことで、試行錯誤の末、home.phpを発見しキタ━(・∀・)━!!!!となりました。

ちなみに、タイムラインの下のLINE@のボタンもhome.phpにis_mobile関数でブチ込んでます。イエーイ

3 before-main.php(子テーマに最初からある)

PCの「主要カテゴリ最新記事」で使いまくってるファイルですが、ここに、is_mobile関数で表を入れてみたら、アラ素敵。gori.meっぽい主要カテゴリリンクが、モバイルでもできるじゃ無いのってことで、やってみました

image

↑これは、iPhone 6s Plusでの表示ですが、iPhone SEでも確認していますので、4〜5.5インチのスマホでちゃんと2行表示にならず、1行表示で「主要カテゴリモバイル版」イケます

表も、地味に少しずつ数字変えて作ってるので、私みたいなコード知らない人間でもイケますから、頑張りましょう!

なお、「Googleカスタム検索」もタイトルロゴ下にありますが、これも、マネさんの要望で、Ptengineで見ると、かなりクリックされてますし、gori.meでも、モバイルの検索窓は上にあります。効果はあると思います

これについては、header.php(親ファイル)に、コードをブチ込んでますが、多分ですけど(やってないけど)、before-main.php(子テーマ)にis_mobile関数でコードブチ込むとイケると思います。多分ですけど

4 single.php(子テーマに移動)

いじりまくってる、single.phpですが、これは普通は親テーマにありますが、ウチは子テーマに移動して追記しまくってます

で、だいたい場所はわかってるので、多分ここだろうってところに、is_mobile関数で、TwitterのタイムラインとLINE@のボタンを入れてみたら次の通り

image

↑single.phpってのは「個別投稿ページ」の表示に関わると思うんですが、home.phpをいじっても、ここにTwitterのタイムラインはでません。あくまで、home.phpは、トップページなんですよ

だから、個別投稿ページにタイムラインやLINE@のボタンを設置したい場合はsingle.phpになります

ただ、これ、基本親テーマなんで、いじりすぎると、親テーマアップデートでおかしくなります。実際、2.2.3を適用するとウチのブログは関連記事が表示されなくなりましたので、2.2.2のままアップデートできない状態となっていますから、カスタマイズは自己責任で行いましょうね

まとめ

カスタマイズ、楽しいよー

あの、画面がホワイトアウトして「エラー」が画面に出た時の絶望感と、読者からの「表示されてませんよー」のメッセージの嵐、そして、ウマく行った時の感動と、それを誰かに伝えたいんだけど、コードのことを伝えてもわかりにくいので、一人で「っしゃあ!」って叫ぶあの孤独感、全てが最高です

今日は常連さんに「スゴーい」って言って頂いたのでマジで嬉しかったですね

朝はバタバタして、ロクに記事も更新せず、ずっとたけPと、マネさんと、常連さんと打ち合わせしながらあーでもない、こーでもない、こういう表示が良いみたいなことをやってましたが、良い感じでまとまったので、記事にしました

これで、Ptengineでのデータ収集がどうなるか、楽しみですね。

果たして、どこがクリックされるのか?自分では思ってないようなところがクリックされ、自信を持って出したパーツが全くクリックされないという切ない状況が簡単に起きますのでスゲーヒートマップ、使えます

ぜひ、皆さんも、私でも出来るので、is_mobile関数を使って、モバイル表示のカスタマイズ、やってみませんか?

PS PC版トップページタイトルロゴ右の表型メニュー表示について

早くも問い合わせ殺到ですので、後で記事にしますが、まあ、gori.meと同じになりますので、一応私はg.O.R.iさんにお話ししまして、背景画像も第6案まで出してスタッフで決めました

コード公開は多分しませんが、キモとなるファイルや、基本的なやり方は紹介しますので、ぜひチャレンジしてみてください。

これについては、Simplicityでのタイトル右のスペースに表型のメニューを配置するやり方はググっても出てきません。スゲー難儀しました・・・。が、できますので、後ほど記事をご覧あれ!

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

この記事の関連カテゴリ

サイト内検索