学習の記録 2023年1月21日
どうも、こんにちわこんばんわ!子育てしながら独立するのを目標にしている子育てパパのひとしです!
本日もWordpress学習、2時間ほどこなしましたので、本日の学習記録です。というわけで今日からちょっとずつどこまでやったのか明確にするために記録を付けていこうかなと思います!
今日どこでつまづいて、どんなことをしたのか振り返りながら日記のような感じで投稿もしていこうかなと思います!
あとで見返して時折こんなことやったなとかこんなことしなくてよかったなとかいろいろ自分を見つめなおせますし、このブログを見てくださる初学者の方にも、知識を共有したり共に学習を頑張ってる同志として何か伝えられるかなと思ったからです!伝わらないかもしれませんが(笑)
ベテランの方で、このどうでもいいブログを見てくださってる方がいれば、こんな学習したほうが良いよとか、これはしなくていいよとかいろいろコメントでアドバイスしてくださると非常に助かります!
なので、今日からぼとぼち投稿していこうかなと思いますので、どうかゴミを見るような目ではなくて、巣立ちしようとしている雛鳥を見るような生暖かい目で見てあげてくださいませ(笑)
では早速本日の学習記録を紹介していこうかなと思います!
本日は学習時間は約二時間、学習した内容は、前回の投稿でもチラッとご紹介した書籍、ビジネスサイトを作って学ぶWordpressの教科書から、ページャーを設置し、一覧ページを使いやすくすることと、サイト内検索を動作させる、といった内容になります!
ページャーを実装する
まずページャーについてですが、ページャーというのはそのサイトのページ数を表示し、クリックすると次のページに行ったり前のページに戻るような複数サイトにページがある場合によく見るものですね。こんなやつです↓
これを実装するには WordPressではプラグインを使って実装します。使わなくても実装はできますが使ったほうが圧倒的に楽なのでこの本でもプラグインを使った実装で紹介されていますね。
ちなみにこの本ではPrime Strategy Page Naviというプラグインを使っています。
ではさっそく実装! WordPress管理画面からのプラグイン、Prime Strategy Page Naviと検索して…
ムッ!ない!どれだけ検索しても出てきません。
どうやらこの本、現在はインストールできないプラグインが多々出てくるようです。
これは困った💦_:(´ཀ`」 ∠):
仕方ないので、代わりに代用できそうなプラグインを調べます(めんどくさいなぁ..)
そしたら、WP-PageNaviというページャーを作れる同じようなプラグインを見つけたのでこれをインストールしてみることにしました。
二つの矢印のマークが書かれているやつですね。
インストール後、プラグインを有効にして使用します。
コードは表記したい場所に
<?php wp_pagenavi(); ?>
この一文を追加するだけのようです。
追加後は、この通り!
無事にページ送りができるようになりました!
このままでは場所が左端に寄りすぎてるので真ん中に移動したいと思います。
検証ツールで実装されたページ送りを調べてみるとwp-pagenaviというクラスが追加されていますので、読み込んであるカスタマイズ用のCSSにwp-pagenaviを記述してtext align:centerと上下のpaddingを20px開けました。
するとこの通り
無事に位置も真ん中に来たので、無事にページャーの実装ができました!
続いてはページ内検索を実装します。
ページ内検索を動作させる
メインのホームページに検索できる項目があって、そこに見たいページの情報を入力すると、そのページを検索して表示させてくれる機能を実装しました。
例えば検索ボックスにモールと入れると、店舗名を一覧で出してくれます。
ここら辺は本通にやってれば特につまずくとこは無かったかな?強いて言うならすでに書いてあるコードに追記する部分が多くて見落とさないようにコードを書くのが大変でした笑
関数の意味は次のページとかに意味が載ってるのでザッとチェックしつつ何をしているのか頭に入れながら進めます。
ここに限った話では無いんですが、 WordPressってPHPの構文を書く時に一文字でも抜けやタイプミスがあったりすると途端に動かなかったり画面が真っ白になってエラー文出たりするのでその都度書いたコードを一文字ずつ確認しながらエラー対処してかないといけないので慣れないうちはひたすら見直し、見直し、見直しでなかなか進まない(>人<;)💦
しかしここを乗り越えてこその WordPressマスターですので、今は修行だと思って頑張るのみですね💪
ということで今日もお疲れ様でした😪
またお会いしましょう!では!