Wordpressテーマ作成練習日記｜物理・プログラミング・Python、Web制作・自己啓発

【完成！！】Wordpressの自作テーマ練習。おわた('ω')ノ

1/7頃から毎日コツコツとWordpress自作テーマ練習をしておりまして・・・やっと1冊読み終わった。それを全てnoteに記載しておいたのでここにまとめておこうと思います。０．PHPの学習１．学習ロードマップを作成２．環境構築３．1冊やたすらコードを書き続ける（書き写してただけ（　＾ω＾）・・・）０．PHPの学習 Wordpressのほとんどが「HTML・CSS、PHP」で書かれているため基本的なことを勉強しておかないといけません。まずは、PH

【第17回】Wordpress自作テーマ練習。トップページ作成

引き続きWordpress自作テーマ作成の練習をしていきます。前回の内容はこちら↓ ↓こちらの参考書を参考にしながら自作テーマの練習をしています。本日の内容トップページを作成して、ビジネス風のサイト構造にします。 ↑こんな感じのトップページです。トップページを「個別ページ」から作成するまずトップページを個別ページから作成します。中身は何も書かなくても良いです。次に、サイトにアクセスした際に「トップページ」が出るようにします。 ※この設定により投稿ペ

【第16回】Wordpress自作テーマ練習。記事の概要表示・サムネイル画像の表示

引き続きWordpress自作テーマ作成の練習をしていきます。前回の内容はこちら↓ ↓こちらの参考書を参考にしながら自作テーマの練習をしています。本日の内容記事の概要の表示・サムネイル画像の表示今まで16回に渡ってWordpressの自作テーマ作成練習をしてきましたが、本講座でいよいよ見た目の整ったサイトになってきたように思います。 ↑いい感じでしょ(^^)/ やっとそれっぽくなっただけです。まずは全体のコードをお見せしましょう（記事概要を表示・サムネ

【第15回】Wordpress自作テーマ練習。レスポンシブ対応の画面にする

引き続きWordpress自作テーマ作成の練習をしていきます。前回の内容はこちら↓ ↓こちらの参考書を参考にしながら自作テーマの練習をしています。本日の内容は画面をレスポンシブ対応にする画面がレスポンシブ対応ではない場合画面がレスポンシブ対応ではない場合とはどういう状態かというと、携帯で見た時のように画面サイズを小さくすると・・・・こんな感じになります('ω') 結構横幅がキツキツですよね・・・これを「あるサイズ以下の画面」だと2段組みの表示ではなく

【第14回】Wordpress自作テーマ練習。2段組みにする

引き続きWordpress自作テーマ作成の練習をしていきます。前回の内容はこちら↓ ↓こちらの参考書を参考にしながら自作テーマの練習をしています。本日の内容はホームページを2段組みにする 2段組みのためのクラスを用意する2段組にするためにはクラスを用意します。「index.php」には以下のようにクラスを用意します。 index.php <?php get_header(); ?><div class="container"><div class="co

【第13回】Wordpress自作テーマの練習。お問い合わせフォームの表示

引き続きWordpress自作テーマ作成の練習をしていきます。前回の内容はこちら↓ ↓こちらの参考書を参考にしながら自作テーマの練習をしています。本日の内容はナビゲーションバーにお問い合わせフォームの表示させる固定ページの新規作成固定ページで新規作成でお問い合わせフォームの作成を行います。「外観」→「メニュー」でお問い合わせフォームをナビゲーションバーに表示するようにする。これで「お問い合わせ」がナビゲーションに表示されました↓ お問い合わせフォーム

【第12回】Wordpress自作テーマの練習。ナビゲーションの表示

引き続きWordpress自作テーマ作成の練習をしていきます。前回の内容はこちら↓ ↓こちらの参考書を参考にしながら自作テーマの練習をしています。本日の内容はナビゲーションを付けるナビゲーションは「メニュー」で設定するナビゲーションは「外観」→「メニュー」から設定します・・・・が、今のままだとナビゲーションの設定ができません。「function.php」に register_nav_menu('navigation','ナビゲーション'); を追加

【第11回】Wordpress自作テーマ練習。ヘッダー・フッター設定をパーツ化

Wordpress自作テーマの練習の続きをやっていきます。前回までの内容はこちら↓ ↓こちらの参考書を参考にしながら自作テーマの練習をしています。本日の内容ヘッダー・フッター設定をパーツ化する今日の内容はとても簡単です。やることは「index.php」に書いてあったheaderタグとfooterタグを「header.php」と「footer.php」というファイル内にまとめてしまってそれを「index.php」から呼び出すような設定を行うだけです。 ※↓

【第10回】Wordpress自作テーマを作成練習。固定ページの作成

今日からWordpressの固定ページを作成します(^^)/ 前回までの進捗は以下でもまとめています。こちらの参考書をもとにテーマ作成の練習をしています。今日の内容固定ページを作成してみよう固定ページを作成するまずは固定ページを作成してみましょう。「固定ページ」→「固定ページ一覧」から固定ページを作成します。これを実際に表示させてみましょう。このようになりました。固定ページ専用のテンプレートファイルを用意固定ページは通常のページとは区別してテン

【第9回】Wordpress自作テーマを作成練習。コメント欄とコメント投稿の表示

引き続きWordrpressの自作テーマの練習をやっていこうと思います。このnoteでは下記の書籍を参考に自作テーマを作成しています。前回の内容はこちらです↓ 今回の内容コメント欄を表示、コメントの投稿できるようにするやっぱりブログ記事を投稿しているからには不特定多数の方が見てくれるため、コメントをもらうことがあります。 Wordpressでコメント欄を出すためにどのようなコードを書けば良いのかを勉強しました。コメント欄の表示、コメント投稿を表示ここで行

【第8回】Wordpress自作テーマ作成練習。カテゴリー・月別ページを作成する

引き続きWordrpressの自作テーマの練習をやっていこうと思います。このnoteでは下記の書籍を参考に自作テーマを作成しています。前回の内容はこちらです↓ 今回の内容「カテゴリー」「月別」ページにアクセスした場合に、ホームページの上に見出しとして表示する。カテゴリーと月別の表示まず何をやるのかを確認しましょう。１．カテゴリーにアクセスした場合に下記の表示を行うようにします。２．月別ページにアクセスした場合に下記の表示を行うようにします。 ※「月別

【第7回】Wordpress自作テーマ作成練習。メニューを表示する

今日も引き続きWordpress自作テーマの練習を行っていきます。参考にしている書籍はこちらです↓ 前回の内容はこちら↓ 今回の内容ブログのサイドバーにメニュー表示する ※サイドバーといってもまだサイドバーになっていませんが・・・ウィジェットを表示できるようにするウィジェット機能が、「カテゴリー」「アーカイブ」「月別投稿数」などのメニューを表示してくれる機能です。ウィジェット機能を有効にしてメニューを表示できるようにします。「mythema」の中（inde

【第6回】Wordpressの自作テーマ作成練習。本文中に画像を挿入

Wordpress自作テーマの続きをしていきます('ω') 参考にしている書籍はこちらです↓ 前回の内容はこちら↓ 今回の内容記事の中に画像を入れる画像を挿入する画像の挿入するには、Wordpressで記事を書くところから「メディアの追加」からできます。これで画像が追加できました。画像の挿入位置にデザインをあてる画像を挿入して「中央揃い」「左揃い」などしてみましょう。そして記事の文章を「テキスト」で見てみます。すると、imgタグにはクラスが割り当てら

【第5回】Wordpressの自作テーマ作成練習。ヘッダー、フッターの表示

引き続き、Wordpress自作テーマの勉強をしていきます(^^)/ 前回の記事はこちら↓ このnoteではこちらの参考書を参考にしながら自作テーマの作成の練習をしています。今日のnoteの内容 Wordpress自作テーマに「ヘッダー、フッターを追加する」というのをやります。完成版はこちらです↓ ヘッダーフッターの表示まずは「index.php」を見てみましょう。 index.php <!DOCTYPE html><html lang="ja"><head

Wordpressテーマ作成練習日記

記事一覧