カネコタクヤ

Rikkio univ

カネコタクヤ

Rikkio univ

マガジン

  • Vue.js初心者による初心者のための完全入門講座

最近の記事

【WordPress】トップページに特定カテゴリーの投稿一覧を表示する方法

想定する状況として、トップページ(front_page.php)に、「ニュース」カテゴリーの中にある記事を一覧表示したいと思います。 ※「ニュース」カテゴリーに当てられたスラッグ(固有のURL)は「news」とします。 それでは、コードを書いていきます。 //front_page.php<?php $term_obj = get_term_by( 'slug', 'news', 'category' ); ?> <h2><?php echo $term_obj->

    • 【WordPress】トップページから特定の親を持つ子ページ一覧を表示する方法

      想定している状況としては、「front-page.php(トップページ)に『A』という親を持つ子ページ一覧を表示させたい」という状況です。 早速コードを書いていきます。 まずは前半です。 //<front-page.php<?php$shop_obj = get_page_by_path( 'A' );$post = $shop_obj;setup_postdata( $post );?> <h2><?php the_title(); ?></h2>

      • 【WordPress】子ページ一覧を表示する方法

        「固定ページ」には、親ページと子ページという概念があり、親ページの中に子ページが入っている、というイメージで特に問題ないかと思います。 さて今回は、「親ページにアクセスした際に、その親に属する子ページ一覧を表示する方法」を備忘録的に記しておきます。 親ページにアクセスした際に、その親に属する子ページ一覧を表示する方法 まず、親ページのファイル名を「page-(スラッグ名).php」としておきます。こうしておくことで、このファイルが親ページのテンプレートとして読み込まれま

        • 【無駄なコード一切なし】WordPressで「投稿」記事を表示させる方法

          WordPress管理画面から作成した記事を、ブラウザ上に表示させる為の方法です。 ここで言う記事とは、「投稿」のことです。「固定ページ」ではないので、注意をお願いいたします。 前準備として、記事をWordPress管理画面から記事をいくつか投稿しておくと良いかと思います。 さて、まずはファイル名を"single.php"としたファイルを現在有効化中のテーマディレクトリ内に追加し、WordPress管理画面で「投稿を表示」をクリック。 "single.php"というテ

        【WordPress】トップページに特定カテゴリーの投稿一覧を表示する方法

        マガジン

        • Vue.js初心者による初心者のための完全入門講座
          5本

        記事

          WordPressテンプレートタグの個人的メモ.1

          WordPressのテンプレートタグがたくさんありすぎて、頭が混乱して来ましたので、備忘録的によく使うであろうテンプレートタグをメモっておくことにします。 WordPressテンプレートタグは、同じカテゴリーの中の「A」という記事を参照する場合にしても、その記事を「どこから参照するのか」によって書き方が結構変わって来ます。 例えば「ニュース」というカテゴリーの記事一覧ページから「記事A」を参照する場合と、トップページから「ニュース」カテゴリーの「記事A」を参照する場合とで

          WordPressテンプレートタグの個人的メモ.1

          Vue.js初心者による初心者のための完全入門講座「第五回」

          こんにちは、金子拓矢(@taku_twitt0622)です。 第五回となる今回では、「繰り返し文」について学んでいきます。 具体的には、配列を用意して、そこから1つずつ取り出してその内容を表示する、というのが繰り返し文ですが、 Vue.jsではこの繰り返し文を、ディレクティブ(v-からはじまるVueの用意してる便利な機能)を使うことによってhtmlファイル上で実現することができます! それでは、早速解説に入っていきますね。 繰り返し文はこうやって実装する 繰り返し

          Vue.js初心者による初心者のための完全入門講座「第五回」

          Vue.js初心者による初心者のための完全入門講座「第四回」

          こんにちは、金子拓矢(@taku_twitt0622)です。 今回は、「双方向データバインディング」について解説していきます。 これも、この講座の終着点である「Todoアプリ」を作成するにあたって重要な内容になります! 双方向データバインディングというと難しそうに思うかも知れませんが、簡単にいうと「htmlファイルからVueのデータをいじれる!」ことです。(か〜なり簡単に言ってます笑) 双方向データバインディングを使うには、v-modelディレクティブを使います。以前

          Vue.js初心者による初心者のための完全入門講座「第四回」

          Vue.js初心者による初心者のための完全入門講座「第三回」

          こんにちは、金子拓矢(@taku_twitt0622)です。 第三回の今回は、Vue.jsのリアクティブ機能について、実際にコードを書きつつ解説していきます。 リアクティブシステムって何? そもそもリアクティブとは?って感じだと思うのですが、僕なりの解釈で簡単に言うと、 「何かの変更が一瞬で反映される」ことです。 厳密に言うと違って〜これはこうこうで〜みたいな難しい説明は置いといて、感覚的に言うとこんな感じです。笑 さて、実際にVueを使ってリアクティブを体感して

          Vue.js初心者による初心者のための完全入門講座「第三回」

          Vue.js初心者による初心者のための完全入門講座!「第二回」

          こんにちは、金子拓矢(@taku_twitt0622)です。 第二回の今回は、Vue.jsの基本的な扱い方を、実際にコードを書きながらおさえていきましょう。 まずは、前回作成したファイルをエディタで開いてください。 Vue.jsでは、htmlファイルに記述した内容と、javascriptファイルに記述したvueの処理を結びつけることができます。 この結びつけることを「バインド」と言ったりしますが、まずはその結び付け方を解説していきます! Vueインスタンスを生成

          Vue.js初心者による初心者のための完全入門講座!「第二回」

          Vue.js初心者による初心者の為の完全入門講座![第一回]

          はじめまして、金子拓矢(@taku_twitt0622)と言います 最近Vue.jsを勉強しているのですが、「なんか移動時間とかにゆる〜く学べるサイトとかないかな〜」と思ったので、自分で作ってみることにしました 単純にインプット作業の連続だったので、良いアウトプットの機会としても、本記事を書いていきます 初心者だからこそ書けるわかりやすい記事を目指して、Vue.jsってなんぞや!ってところからやさし〜く解説していきたいと思います 最終的に簡単なメモアプリを作成できると

          Vue.js初心者による初心者の為の完全入門講座![第一回]