カテゴリー: サイト方針

１時間以上格闘したけれど、子テーマを運用しようとしても、画面が正しく表示されない。

うまく反映されないので検索すると「functions.php」の名前が間違っているというのが圧倒的に多いんだけど、何度見ても間違えていない。パーミッションの関係かもしれないと思って直接747とかにしてみたりしたが関係なかった。

zip形式でのアップロードではなく、直接ftpツールでファイルとか作ったのがまずいのかと思って、zip作ってインストールとかしてみたがやはり変わらず。

というか、CSS自体が読み込めていないのではなくって、単に表示が崩れる(20-17のような画面にならない)だけなので、もっと別に原因があるのかもしれない。このまま続けても埒が明かないので、取りあえずもとの状態に戻して、子テーマは使わない状態に戻した。

しかし、このままではテーマ含め色々と更新も怖くてできないし、早急になんとかしないとならないのは間違いない。JSでエラーがでている様子は無いし、テーマのライブプレビューとかやろうとすると、500でエラーになっていたりするので、PHP側で何らかのエラーがでているのではないだろうか。

取りあえず、現状までのログを保存してエラーがでているかどうか、確認してみようか。

取りあえず、訳もわからずに貼っていたヘッダ画像などは全て取っ払ったwとは言え、トップ画面だけは何かないとサマにならないので、グラブルの運営さんが「ご自由に」と言ってくださったルナール画伯の画像を設定させて頂いた。

つーても、早い内にもうちょっとまともなトップ画面を調達(作るにしろ探すにしろ)しなければならないだろうな。

今使っている20-17というテーマは、きっとシンプルなテーマなんだろう。思ったより設定ができないし、トップ画面は小さめなものを用意してもPCだと拡大されておったまげたりする。でもスマホで見ると丁度良かったりして、結構いいのかもしれない。

現在、ホームページからスクロールしていくと、ブログを含めたいくつかの固定ページが表示されるようになっていて、実験中の「検索画面」も含まれているけれど、検索画面へはメニューから遷移して、ホームページとしては、サイトの説明や問い合わせ、ブログのみにした方がいいのかもしれない。

ひとまず、これで外観については終了でいいか。引き続き、子テーマについて調べてみよう。特に検索画面についてはその方が良さそうだ。

プログラム的にやりたかった事が、ひとまずこれで全部検証できた事になる。

1. 検索項目をDBから取り出してプルダウン表示(MySQL)
2. 二つのプルダウンを連動させる(DynamicHTML)
3. 検索条件に合致したデータを画面遷移させずに表示(Ajax)
4. 複数のテーブルの情報から１回のSELECTで全て取り出す(JOIN)

検索条件を増やすのかこのままなのか、取り出す情報の追加、さらに検索結果からの詳細表示など、機能全体としてはまだまだやるべき事はあるのだけれど、基本はここまで検証してきた結果を組み合わせていけばできるはず。
今後はDBに格納するデータを増やして、画面の体裁などを検証していく感じになるだろう。

という事で、現状残っている懸案事項について解決していく必要がある。
1. そもそもWordPressまだ良くわかってない
2. 仮で設定してる画像とか置き換えが必要
3. 子テーマってなんぞ？

そもそも、WordPressで作ってていいのか？って懸念事態はあるんだけど、MySQLやらPHPやらjQueryやら考えると、確かにこれ開発するのには相当便利なんだよね。
将来恒久的に維持していく事を考えた場合、サーバーの維持費とかも考えないといけないだろうけど、WordPress自体なら自前のLinuxサーバーでも導入できるだろうし、色々な可能性に対応できるのがいいな。

ひとまず、今日はWordPress(テーマ)の設定を色々見直して、(まだしないけど)公開に値するような体裁にする事を目標にしよう。

プルダウンから項目を選択し、ボタン押下でDBを検索してテーブル表示するという一連の流れがようやく形になった。

検索項目はPOSTパラメータとしてPHP側へ渡し、PHP側でJSON形式にencodeしたデータをWordPress側へ返すという形になっている。
JavaScriptでJSON.parse()でjson形式に戻した上で、結果をテーブルに表示している。
まだまだ手探りな部分もあるので、色々と決め打ちにした作りになっている部分が多い。
例えば、結果表示のテーブルにはtbodyタグが１個という前提になってしまっている。もうちょっと勉強してBodiesとかで制御すればいいのだろうけど、現状はこのままでしばらくいいか。(タグ指定でtbodyを取得しておき、新しく作ったtbodyに検索結果を行追加して、最後に取得してあったtbodyを削除して、新しく作ったtbodyを追加するという方法を取っているが…、もうちょっとスマートなやり方がありそうな気はする。)

現時点では、IDなどがそのまま検索結果として表示されているが、本来は別テーブルにある名称などを表示させたい。その場合プログラムでやるのではなく、複合SQLでやるつもりなのだが…、この辺りの知識が疎いので手間取りそう。
最悪、プログラムでやる事も考えないといけないが、その場合SQLが何回もでてしまう事になりかねないので避けたい。テーブルの項目二重持ちもないでは無いが、それはやはり避けたいのでひとまず複合SQLに挑戦しよう。

複合SQLの目処がたったところでテーマの調整に入ろうかと思う。使ってる画像があまりに酷いし、もう少し見易い画面にしないとダメだろう。
検索画面自体もどうにも野暮ったいし…。

ブログとかはとりあえず我慢して、検索結果画面だけ別テーマにするとかが良いのだろうか。その場合はいわゆる子テーマとかになるのかな？
そういう辺りを含め、色々やってみたいと思う。

とりあえず、今日やりたかった部分はある程度形になったので、今日は満足ｗ

Ajaxによる、非同期通信ようやく成功！

変数名の間違いをしている事に全然気づけず、数時間無駄にしてしまった…。
JavaScriptの場合この手のミスはやってしまいがちだけど、中々難しいな。
まぁ、そういうミスが起こり易いという認識ができたからよしとしようか。

とりあえず、ボタンを押下して、サーバー側(PHP)関数を呼び出して、結果を表示するという一連の非同期通信処理ができた。

よし、次は条件をサーバー側に渡して、その条件で検索するという所までを目指そう。
暗号化とか色々お作法はあると思うけど、まずは単にPOSTでパラメータを渡して、それをWHERE句に指定して検索をかけ、結果を得る事を目指す。

うまく行けば、今日中にそこまではいけるぞ。

WordPressとテーマの更新通知が来た。

以前チラ読みした情報によると、下手に更新すると今作っているfunction.phpが上書きされてしまって、色々困る事になりそう。
本来は、それを防ぐ為？に「子テーマ」なるものを作り、自作関数などはそこに定義していくのが推奨されているようなのだけど、あいにくまだそこに手をつけられていない。
とりあえず、WordPress本体の更新は実施するけど、テーマの更新は保留にしておくのがよさそう。

検索ボタンを押した後、画面遷移させずにDBから検索させて結果を表示させる。
表示させる部分はDOM操作でOK。表示させるデータはJSONでやり取りする…のかな？

検索機能の本体はSQLで処理するだけだし、PHPでやるんだろう。
だとすると、function.php内に実装して、それを呼び出すという形になるのだろうか。
初期表示では無いので、ショートコードでは無い。

結論から言うと、あらかじめ用意されているWordPress用の関数を使ってやり取りするらしい。表示時に呼び出すもの、随時呼び出すものとあるが、それらはfunction.php内に宣言しておき、必要なフック、ハンドラに渡すような感じらしい。

とりあえず、習うより慣れろ。

まずボタン押下でAjaxでDOM変更する一連の流れを書いてみよう。

色々と手間取った(単に変数名の取り違い)けれど、どうにかこうにか形になった。

プルダウン１で選択したものを元に、プルダウン２を絞り込み表示する。先頭を選んだ場合には全てを表示…という処理が、PCブラウザでもスマホブラウザでも正しく動くようになった。

想定通り、固定ページ内の最後で、現状のプルダウン２のクローンを保持しておき、プルダウン１のonChangeフック関数の内部で、一旦プルダウン２を初期化(pulldown2.length = 0;)してから、該当するオプションオブジェクトを、保持しておいたクローンから抜き出して追加。速度的にも問題ないように思える。想定では間に通信入らないはずだし、これでいいはず。

PCとスマホ両方動くとはいっても、どちらもChromだから当然と言えば当然なので、又別ブラウザでも確認は必要だとは思うけど、今はそこまで厳密な確認は必要ないだろう。

とりあえず、当初目標だった二つのプルダウンの連動というものは達成できたので、次のステップに進もうかな。

次は指定された条件でDBを検索し、その候補を表示するという部分か。

大雑把には次のような感じか。

• 結果はリスト表示
• 表示されたリストを選択してさらに詳細表示が可能
• 検索条件とは同じ画面に表示

まずはここまでを目標にしよう。

一方のプルダウンの選択イベント、その都度DBにアクセスしに行くのは、リソースがいくらあっても足りないし、以前も考慮したように、その都度通信が発生するのはダメでしょう。

という事で、初期画面表示時に、連動先のプルダウンの選択肢データを全て読み込んで起き、選択イベントのタイミングでそこからオプションタグを生成し直すという方針が考えられる。

オプションタグの元になる選択肢データはJSQN形式で…。

と考えたんだけど、幸いにして元々そこまで長大なデータでも無いわけだし、一度SELECT文を作ってしまい、その作ったSELECTオブジェクトを保存しておくというのはどうだろう？

大きなデータだとメモリ食うから無理だけど、小規模なら大丈夫なのでは？

初期表示状態では、１つ目のプルダウンは「未選択」を選択状態にしておき、２つ目のプルダウンもdisableにしておくことでごまかせそうだぞ。

とりあえずそこまでやってみよう！

まず大きな方針として、WordPressの「投稿」でスクリプトを使って実装するのか。
はたまた、素でPHPファイルを作成し、ドキュメントルートなどに置いて動かすのか。

将来、本番サイトに以降しようとした際、自前でMySQL、Apache、WordPress、PHPを全て用意できるのか(いや、これはできるでしょ)。
ただし、家のマシンに構築するのではなく、レンタルサーバー上に構築するとしたならば、環境に左右されない作りにしておくのが本当はいい。

しかし、ここんとこXREAでWordPressを使っていると、やっぱり環境整えた上で作った方が、色々と楽だよなーと実感してきた。
試験導入が終わったら、ちゃんと有料契約をして継続的に使っていくというのも、一つの選択肢だろう。

という事で、今回はWordPressにどっぷりと使ってみようかなと思う。
ただし、プラグインに関しては極力使わない方針で行く。

現状「子テーマ」ってのが何なのか良くわかっていないで、直接20-17を使って、いくつかのファイル(function.phpとか)を触っているけれど、どうやらあんまり良い作法ではなさそう。
ある程度形ができたところで、その辺りもやっておきたいけど、ひとまずは現状のまま進めよう。