Elementorあれこれ 一歩進んで一歩さがる
今日もう一つやりたかった「パンくずリスト」・・・・
できなくはなかったのですが、
構図がよくわからず・・・・ん？？？ん、、、そう。構図が。。。。
それでも、テストするにあたり画面遷移できないのが不便なので
一旦、リンクボタンをはっつけました。
あぁ、、、そうよ・・・そう 構図が変なのよ。。。
そらそうだ。パンくずリストでもボタンでも同じこと・・・・。
ホームにもボタン、ブログサイトにもボタン
ボタン、ボタン、ボタンと 関係ないショッピングサイトのボタンが出来上がる・・・の巻き。
大着してヘッダーにいれてしまったからだ。ここは必要なサイトにだけ 入れるしかないのでしょう。
休憩してからやり直します♪
それができたらば・・・決済ページのカスタマイズを予定。
今日は、ずっと気になっていた LOOPで作成した商品一覧の文字回り込みによるレイアウトがちゃぽこ・・・をきれいにしましょう。
まずはtableで試しましたが、、、、、ここにはproducttittleが指定できそうになく ん～、ん～っと・・ん～～～～～んっと・・・・
最近なじんできた「コンテナ」 これを使うことに。
といいつつまだまだ、インナーセクションのときとの使い勝手の差の全貌はわかっていないけどなんだか良さげ。
コンテナを挿入して最小の高さを設定・・・別にtableのhightをhtmlで指定してもよかったんでしょうね。。。ここはウィジエット使います。
コンテナにテキストウィジエットを入れて動的タグにてタイトルを・・・
普通にタイトルだけをダイレクトで入れた時より、使える幅が狭いけども・・・・CSS的要素は今はおいておき、、、機能確認を。
これなら文字が回り込んでも、各々のグリッドの中ががちゃぽこにならないぞ！やたー (*´▽｀*)y
何を試したかったのか・・・別サイトのショッピングサイトをセッティング。
あら、、、決済の設定まだだったのか・・・さらに・・このサイトは趣味の山登りの会へのデモサイトにしていたので
ショッピング関連の固定ページは削除して歯抜け状態に・・・・
あれこれ調べても「再設定しなおし」のような記事もあって がっかり、、、、
悩んでも仕方ないので
プラグイン削除して再度、インストールして有効化。
でも・・・なんかさっきまでの歯抜け状態がよみがえるだけ。
何かが残るゾンビ系の作りなのかな（泣）
んーーーー 全くよくわからんまま 設定周りの項目を見ていたら
「ステータス」の中に「ツール」とかなんとか・・・ふむふむ・・・ふむふむふむ・・・・・
OH！「基本となるWooCommerceページの作成」というそれらしい機能がある♪
さっそく ぽちー。固定ページが出来上がってる るん♪(*´▽｀*)
さすが、私！ 私 さすが！
気を取り直して編集開始・・・というかstripeの設定をし終えたので
とりあえず決済してみることに・・・。
商品一覧からカートに追加、支払いページにいくと・・・出た！画面崩れ、、、、、(´;ω;｀)
これは困った。ショートコードしかないのに中身触れないよぉ～～～～～
これはこたえました。。
テーマとの相性だとかCSSの干渉だとか考えられるけど直し方いずこ？？？
まぁ、2時間以上途方にくれたかな（笑）彷徨える地球人
スラッグ・・・大丈夫、サイトの設定・・・ん？ まさか・・・・
サイトの設定・・・「Elementorキャンパス」・・・これです！これ！！！ 神だわ（笑）Elementorキャンパス＝神！ GOD いや GOOD
無知故か、勘が働く本日の練習でした。。。stripeで決済してみようっと。。なんか１つ Disableになってるけど。
おお！決済できたし Stripe画面にも取引残りましたぞな ♪(*´▽｀*)
今日は、別環境にて
bootstrapを設定に。
ふむふむ・・ふむふむふむ・・・ 以前から やらねば！と思ってたバックアップですね。
これやっておかないと崩れたとき直せないし。
ということで、ftpでダウンロードしようと思いきや・・・
何回やってもダメ。。。。ディレクトリ名のあとに「：」がついてきて毎回名称変更に。なぜだろう？そんな事例あるの？
これでは埒あかない。。。。ってことで
serverの管理画面より 「ダウンロード」。最近のserver管理画面は
よくできてますね。。。。
ってことで、ぽちーっとな。今度はうまくいった様子。
今回は超初心者なので CDN参照方式にして・・・linkさせるだけ。よし完了。
jqueryもいるのかしらん？まぁ、記載しておいてみよう。。。。
一応。。bootstrapの方は読み込めたみたい。jqueryないけれど、、、、（汗）きっとなんとかなるよ。
で、、ふむふむ・・・使い方はこれから・・・・未開の地へ
ちなみに、商品一覧・・・グリッドの見栄え・動作は自作よりプラグインのがそれなりにカッコいいね、、、、、在庫の管理動作もきちんとしてるしこっちしようかな。
こうしたいああしたい・・あれこれあっても
実装の仕方が分からないジレンマ、、、、結構、味わいます。CSS入るけどHTML側は・・・PHPファイル？
ああああああ・・・・あの環境だとできるのに！的な気持ちはエンジニアなら結構思うこと多いのではないかな・・・。
新し環境＝探検 装飾は後からなんとでもなるに違いない。no codeだとなっかなか（汗）
まずは今一番試したい「決済」する行為
今日は、カートに追加～カートを見る（えぇ、、、見ますともさ）、購入手続きに進む（そうね、そろそろ）、
クレジット設定しましたし、、、入力。。。。
「注文する」（デフォルトがこの名前のボタンのままだけど動作確認だから良き）・・・
さーーーーー 押すぞー～～～～～（笑）
設定は、３回は指差し確認しましたしテスト環境だしいけるいける～ ふっふぅ～
ってなことで ぽちとな ← 押すときは簡単
1回目・・・無残にも「配送オプションの設定がありません」
２回目・・・「配送のオプションがありません」・・・配送オプションなんでやねん！（焦焦）＝本心
配送オプションの意味は理解しますが設定方法のぬかりか？？？
決済したいので設定あれこれ。
「注文する」ボタンをぽちとな
やたーーーーーーーーーー ぐるぐる画面きました わくわく感半端なし！！！！
無事、テストOK・・・まだ初歩の初歩で まりこ感激♪（駄）
あたたかく見守ってくださっている 方々に 感謝。感謝を形に変えていきます！
やきもきさせて申し訳ないです。
やればできる＝誰にでも備わってる力
やるかやらないか＝それぞれの自由
やる！
ショートコード、結局レイアウトが崩れておかしい。。。ので、無理やりレイアウトを調整してショートコード化してみました。テンプレート変更すれば反映されてる♪ 楽ちん。。。
リスト一覧と商品詳細に表示する項目あれこれ・・・。真似が一番近道かと他のサイトを参考にとりあえずできあがり。
ADD TO CARTボタンの動作が気に入らない、、、ボタンにもしてみたけど処理遅す。EAのボタンを使って一旦これでいいや。
次、、、カートの編集をしなければ・・・そうこうしていると決済サービスの準備完了とか。。。ふむふむ。。。
プラグイン追加、クレジットテストに代金決済のテスト・・・本番ではコンビニエンスストアからの実際のお支払い？テスト？
だって。。。先長す・・でも楽しみデイス
最近の息抜きは「商品」追加、、、、汗 これならマスターした感じを味わえます（笑）
ぼんやり作業を進めると「saveモード」でしか編集画面が開かなくなったときに困る・・・非常に！
そこで作業記録をつけつつ進むことにしていますが、
ある日は半日の成果が一瞬で没ることもあり、効率はよくありません。
でも、「地道」スキルは自分なりにあると思っているので、地道にコツコツあれこれ試します。
結果、一瞬で没ったあとは「おさらい」。これは実際、初見よりも効率よく進むのでよしとしています。
昨日の作業記録から本日、実装する箇所、試してみる箇所、TODOと３つのカテゴリーにて作業をば・・・。
テンプレートのショートコード埋め込みをやってみましたが、なぜか 表示CSSが崩れる。
立ち止まれないので、もう一回各ページにテンプレートをセッティングしなおしてなんとなく良い感じ。
隙間時間でショートコードをつけるよう検証しようっと
本日ノルマはこなし、明日に進みます。ほっ・・・。
明日は明日で課題が増えていることでしょう！、、、汗
午前中なんとか商品一覧を作り・・・また別の方法で、、、なかなか良い感じにしあがっていたのよね。
午後からは、足りない項目を追加
列の作成、アイテム追加、ビュー追加・・・SPOだとこれでしょ。。。
なんなくやってたことでも環境変わればすべて激変・・・・。
この一連の動作が、Elementorだとプラグインの挿入で１つの作業になるんでしょうね。
はいはい、、あれ、これ便利・・・なんとなくのGUI、紹介動画は英語・・・・
あれこれ、埋め込みいざプレビュー！ はい。画面総崩れ・・・というか
またまたセーブモードでしか開かない。こりゃ絶対に今入れたプラグインが原因だけども
なんかかんか別のところも崩れていく、、、、悲しすぐる。
今からおさらいを兼ねて1からです TOT*
商品は並べたものの、なんか変、、、、。こうじゃないハズのときの「こう」を「こうじゃない」方向にもっていくのは一ハードルを超える必要あり、、、。
基本に忠実にやってるのになぁ (´;ω;｀)
これでは応用まで、十万年かかってしまう。急ごう！！！
タイトルが大文字になる設定になってるのか、、、、なんだっけ・・・。
WooCommerceの設定に悪戦苦闘し数日。商品の並べ方がわからない（汗）並べようと思うと「商品詳細」を書かなければとなり、また商品を取りに行き・・・え？どこ置いたっけの連続。いかん、、、、・そう言うことか。ちょっと手間だけどもう一度ちゃんと商品を商品情報ともども手元に置こう。ちょっと遠回りですけど断然こっちが近道でしょ。
紹介動画や使い方紹介のサイトではものすごく簡単そうに説明してあるけど簡単にいかない、、、今日のノルマは商品並べるとこと。並んで画面見えたらきっとまた先が開けるはず・・。ホンマか？
記事一覧の表示方法あれこれ・・・・
プラグインを試します。
「おぉ！これ良い！ 私が求めていたもの」と思い、使ってみると
「GOOD！！！」
でも。スマートデバイスで見ると今一つなので、見え方チェンジ。「素晴らしい！」
念のため・・・タブレットで表示すると オカシイ TOT*＊
知り合いを巻き込み 検証してみるも残念な結果、、、、、汗
「２」をタップしても画面変わらず。。。
私のスマホとPC以外 pagingボタンを押しても画面が変わらない らしい。。。
こういうの苦手～～～～ OS？ブラウザかデバイスか、、、ひゃぁ（汗）
明日ipadで見るとして今日はおしまい。夕飯食べてなんとなく 新しく投稿をプラスすると
今まで見えてた私のiphoneでも見れなくなるの巻き（ぎょぎょ～っ 汗）
ほほ～っ、、、ってことは 投稿に問題があるんだわん。。。。
わかったぁ～～～～これ！これに違いない！！！
そこ？ スラッグ・・・これ大事なのね、、、、汗汗汗
ということで、無事にぱpaging できたことを確認！ 安眠できそうです。
「２」タップで続き出た！！！
レスポンシブに翻弄され。
スマホで見たら「おかしい、、、（駄）」
テンプレートで設定したセクションの設定、カラムの設定・・固定ページで設定したセクションの設定、カラムの設定・・・
何かが干渉して？おかしなことに、、、。
もう一回セクションからやり直してなんとか。
キレイぢゃん！ ダメ？（汗）
