子育てパパの副業、web制作学習記録

子育てパパの独立を目指す独学者のための勉強ブログ

  • ホーム
  • 最新情報
  • Web製作
  • 学習の記録
  • 日常
  • 副業
  • 学習の記録

学習の記録 2023年1月21日

2023-01-23

どうも、こんにちわこんばんわ!子育てしながら独立するのを目標にしている子育てパパのひとしです!

本日も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マスターですので、今は修行だと思って頑張るのみですね💪

ということで今日もお疲れ様でした😪

またお会いしましょう!では!

ビジネスサイトを作って学ぶWordPressの教科書/小川欣一/穂苅智哉/森下竜行【3000円以上送料無料】
bookfan 1号店 楽天市場店
¥3,080 (2023/01/23 21:34時点 | 楽天市場調べ)
Amazon
楽天市場
Yahooショッピング
ポチップ

SHARE

Twitter Facebook LINE Instagram

投稿ナビゲーション

Web制作で副業を目指す子育てパパ 〜日常ルーティン〜
コーディングの練習をしよう 〜初級編〜

RELATED

WordPress化したHTMLサイトにカテゴリーで分類される投稿一覧を作ってみた

WordPress、無事Swiper動作に成功!

悲報!Web制作学習、詰みました..

学習の記録 自作プラグイン~PHPの罠

PROFILE

hitoshi

3歳と0歳の子供と妻の4人で暮らしながら、町の製造職に就いているアラサー 脱社畜を目指しWeb製作フリーランスとして独立すべく奮闘中! Web製作の勉強もしながら時に様々な副業もやります

RECENT POSTS

  • 新テーマに切り替えました!子育てパパの新ブログ記事
  • 子育てパパ、ガチで稼ぐための副業始めたってよ
  • WordPress化したHTMLサイトにカテゴリーで分類される投稿一覧を作ってみた
  • WordPress、無事Swiper動作に成功!
  • 悲報!Web制作学習、詰みました..
  • あなたは大丈夫⁉︎お金がない人必見!ズボラ貧乏人の節約術 〜後編〜
  • FXで投資を始めてみよう!子育てパパの投資副業コーナー
  • あなたは大丈夫⁉︎お金がない人必見!ズボラ貧乏人の節約術 〜前編〜

CATEGORIES

  • Web製作
  • 副業
  • 学習の記録
  • 学習の記録
  • 日常

サイト内検索

Twitter、Instagramやっています!よかったらフォロー、いいねしていただけると嬉しいです!よろしくお願いいたします!

ARCHIVES

SNS

Tweets by hit_magazin

dubianrenzhi1624

子育てしながらWeb制作で稼げるようになるのか👶💪
今回は架空の温泉旅館予約サイトを制作したので見てください☺️♨️

ポートフォリオ公開します!
ブログの方でもPCレイアウトのキャプチャも載せてます!

個人ブログURL
https://hitoshi-test.site/

#副業
#Web制作
#子育てしながら勉強
#html
#css
#scss
#jquery
#ポートフォリオ
#WordPress
#頑張る人と繋がりたい 
#web制作フリーランス 
#web制作勉強中の方と繋がりたい
Instagram でフォロー
子育てパパの副業、web制作学習記録