【WordPress】検索フォームの実装方法
こんにちは、daissh04です。
今回はWordPressの検索フォームの 実装方法について記述したいと思います。
この記事はこんな人向けに書いてます。
・自分のブログに過去記事等の検索機能を載せたいけどやり方がわからない
・検索フォーム実装案件を受注したがやり方がわかならない
この記事読んで頂けたら、実装の進め方が理解できるようになると思います！
検索フォームとはこのような感じですね、テキストボックス内に検索ワードを打ち込んんで虫眼鏡ボタンを押下すると、それに該当する記事が検索される。
検索結果表示ページもこのように用意してあげます。
トップページの実装
まずは検索フォームを部分テンプレートで呼び出すので
例えばheader.phpに呼び出し文を書きます（これは必須ではありません。）
searchform.phpを作成
以下のポイントをおさえて記述ください
・formのactionにはトップページurl
・methodにはgetを使用
・nameとidにはsを使用
searchform.php
</form>
テンプレートタグ the_search_query();を使用しています。これは検索フォームに打ち込まれたワードを表示するものです。
検索結果ページを表示したときに検索フォームに自分が打ったワードがあると何で検索したのかわかるからいいですよね、valueに表示させています。
検索結果ページの作成
search.phpを作成してください。
レイアウトはトップページやブログ一覧と合わせると思うので、他ページと同じように部分テンプレートを使用するといいと思います。
・the_search_query();を盛り込みましよう
このようにフォームに打ち込んだ文字が表示されるようにしたいですね
と入力すれば大丈夫です。
あとはブログ一覧ページのように、have_post();のテンプレートタグをwhileで回してあげれば完成です。
ここは前に記事にしているのでこちらをご参照ください。
過去記事リンク
【Rails】動的カテゴリーメニューの実装
こんにちはdaissh04です。
本日は久しぶりにRailsの記事を書きたいと思います。
ホームページでよく見る、カテゴリーメニューの実装方法について
イメージは以下画像のようなものです。
一番左の親カテゴリにマウスを当てると、その右の子カテゴリーが表示され、子カテゴリーをにマウスを当てると孫カテゴリーが表示されるというものです。
親、子、孫のカテゴリー関係の実装についてはここでは書きません。
railsのgemファイルancestryで簡単に実装できますので、ググってみてください。
$(function(){
$('.headerBox__main__bottom__select__category__categorySearch').on('mouseenter',function(){
$('.category_menu').removeClass('noShow');
$('.categorySearch').removeClass('noShow');
var url = '/items'
type: "GET",
url: url,
})
まずは最初に.headerBox__main__bottom__select__category__categorySearchにmouseenterすると以下を発火させます。
cateogry_menuからnoShowクラスをリムーブする。
→これにより、親リストが表示されます。
そしてajaxでrailsコントローラーに非同期通信してメソッドを動かします。
コントローラーでは、indexアクションを動かします。
カテゴリーテーブルの中でancestryカラムがnilのデータをwhereで抽出し
@category_parentに代入してます
def index
respond_to do |format|
format.html
end
end
index.json.jbuilderのファイルの中で、コントローラーで取得した@cateogry_parentをjsonでjsに送り返します。データを簡易的にcategoryParent.idとcategoryParent.nameに変換します
end
データをjsでdoneで受け取ります
.done(function(categoryParent){
categoryParent.forEach(function(categoryParent){
appendHTML(categoryParent)
});
});
})
コントローラーでwhereで取得したデータは配列になるのでeachでバラし、そのデータの数だけapendHTMLメソッドを動かし、htmlを書き加えて行きます。
$(function(){
function appendHTML(categoryParent){
var html = `<div class = 'categorySearch__parentitem'>
<a href= "/items/search/${categoryParent.id}", id = "${categoryParent.id}", class = "category_link">${categoryParent.name}</a>
</div>`
$('.categorySearch').append(html);
}
上がappendHTMLの中身です。
ポイントは各親要素のdivにcategoryParent.idでカテゴリーテーブルのidを持たせていることです。
これにより、後続の処理でこのカテゴリにマウスエンターをした際に、このidを再度ajaxでコントローラーに投げて、その子要素を取得し、再度jsで子カテゴリーリストをhtmlに作り込むと行った流れです。
もっと詳しく知りたいという方はコメントください。
回答いたします。
Wordpressのディレクトリ構造について
こんにちは、daissh04です。
本日は、Wordpressディレクトリ構造について記述したいと思います。
Wordpressの構造上、ブログ一覧や詳細のページや、カテゴリ、アーカイブページ、あとは固定ページといった（企業情報等の情報の更新が少ない）構造が存在します。
それぞれ、ファイル名を適切に指定してあげないと書くページ種類の機能を発揮できない為、Wordpressカスタマイズをする上での必須知識と言えます。
ここでは、各ディレクトとページ名をまとめるので、これに沿ってファイルの名前づけを行って下さい。
ここでは一般的なテンプレート改装として
・トップページ
・記事ページ
・カテゴリー別記事一覧ページ
・月別記事一覧ページ
テンプレート階層でファイルの優先順位が存在します。例えばトップページの場合だと
優先順位
1. front-page.php
2. home.php
3. index.php
記事ページでは
1. single-{post_type}.php
2. single.php
2. index.php
カテゴリー別記事一覧ページでは
1. category-{slug}.php
2. category-{ID}.php
3. cateogry.php
4. archive.php
5. index.php
月別記事一覧ページのテンプレート構造では
1. date.php
2. archive.php
3. index.php
となっています。
Wordpressを構築していく上でテンプレート設計は非常に大事になってきます。
例えばindex.phpは全てのテンプレートで優先順位が一番低いですが、共通で使用できるものとなっています。
つまりカテゴリー別記事一覧ページと月別記事一覧ページでデザインが同じであれば
共通にindex.phpを使用することができます。
また、if文の分岐を記述することによって、全てindex.php一つで作りあげることもできます。
しかしそうすると、index.phpの記述が大量かつ複雑になるため、可読性の観点から適切であるとは言えません。
あらかじめweb構造を把握し全てのテンプレート設計を行うことは容易ではありません。
最初のうちは最低限必要なテンプレートファイルを作り、徐々に増やしていく方針でWebサイト製作するのが良いでしょう。
今後もテンプレート階層は記事にして行きます。
参考にしてもらい縦覧にテンプレートファイル名を変更しながら作業して行きましょう
Wordpress テンプレートタグまとめてみました！part 2
こんばんは、daissh04です。
本日も引き続き前回の続きからWordpressテンプレートタグをまとめていきたいと思います
⑦
この関数は、プラグインで様々なjQueryを使用する際、htmlのheaderに
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
と記述した場合、テーマ内ですでにjQueryを読み込んだ場合、プラグインでの読み込みが重複してしまいます。
この記述により、jQueryをもう一度読みこむ事ができ、重複問題を解決できます
引数には('任意の文字列', 'jsファイルまでのパス')を記載してください
⑧
条件分岐タグです、トップページの判定を行います
こんな感じで使いました。
if以下をトップページのみに当てたい場合に使用してください
条件分岐タグは他にも
is_single()
記事ページが判定
is_page()
固定ページか判定
is_cateogry()
カテゴリーページが判定
といった種類が有ります。
⑨
wp_title('',true,'right');
表示しているページのタイトルを表示します
パラメータとして('区切り文字を指定', 表示するかどうか, '区切り文字の位置')になります。
区切り文字にはハイフンやアンダーバー等の記号を入れてください
表示するかどうかは、表示ならtrue,表示しないならfalseを入れてください
区切り文字の位置は、右に表示ならright、左に表示ならleftです。
⑩the_ID
投稿記事のIDを表示させます。
Wordpressのブログ記事には固定の連番を持っており、そちらをloopの中で属性として付与する際に使用します。
詳細ページに引数として持たせる場合に便利そうですね。
使い方としては
こんな感じです。
これまでで全部で10個紹介してきましたが、まだまだ知らないテンプレートタグ、関数が出てきます。
全て覚えるは無理なので、見かけたらなにをしているのかぐらいは理解できるようになりたいです。
継続して頑張ります
ありがとうございました
Wordpress テンプレートタグまとめてみました！
こんにちはdaissh04です。
今日は継続して勉強しているWordPressのテンプレートタグをまとめて見ました。
①
まずはこちらから、サイトのキャッチフレーズを表示するもの
後のタグでもそうですか( )内はパラメーターと言い、他のパラメーターを入力することで取得するデータを変えることができます。
例えば
<?php bloginfo('name')>にするとサイト名を取得できます。
②
home_url()
トップページのURLを返します。
aタグと一緒に使用しましょう
③
続いてこちらはbodyタグにclassをオートで付与してくれるものです。
例えばサイトのトップページでは<body class= "home blog">というクラスがつけられます。他にもログインしている状態であればadminOnlyというクラスが付与されます。
④
共通で使い回す箇所を部分テンプレートとして別ファイル化し、呼び出すものです。
コードが簡略化されて見やすくなります。
部分テンプレートのファイル名はheader.phpやsidebar.phpとして下さい
もし複数のsidebarを使用している時は、sidebar-categories.phpやsidebar-archives.phpとしましょう。そして呼び出す時は<?php get_sidebar('categories')>や<?php get_sidebar('archives')として( )内にハイフン以下の文字列を記述してください
⑤
ページのタイトルを取得します。
<title><?php the_title() ; ?> </title>という使い方をします
⑥
〜省略〜
ブログ記事が投稿されていたらそれを全て表示させる処理です。
〜省略〜に書かれたコードを記事数文繰り返します。
ブログ一覧表示させる時に使用します。
いったん学習したテンプレートタグを書き留めました。
引き続き新たなテンプレートタグに出会ったら、またまとめしたいと思います。
WordPress テンプレートタグとは
こんばんは、daissh04です。前回から引き続きWordPressで学んだことを書き留めていきたいと思います。
今回のお題はWordPressテンプレートタグ！！
Rubyから入っている私はなんのこっちゃという感じでしたが。
そもそもWordPressテンプレートタグとは、Wordpressにある情報をweb上に表示したり取得したりできる非常に便利なものだそうです。
まだしっくりこないですよね、私もそうでした。
例えば、、WordPressはブログ執筆用がメインなので、下のようにブログを書いたとします。
でテーマ登録してあれば、それにあった形でweb上に表示されると思いますが、カスタムしたい時には、、、
というテンプレートタグの中でも最も重要となるコードを書きます。
これで投稿された記事を全て表示することができます。
<?php 〜?>はphpの命令文ですので、説明は割愛しますね
テンプレートタグはその中にあります。
このif文ですがif(have_post()):でもしも投稿された記事があるならtrueを返し以降の処理に遷移します。
テンプレートタグです。
そして
while(have_post()):the_post();
で投稿された記事だけ、表示を繰り返すという感じになります。
the_post();の説明文は記事が少ないですが、whileループ内でカウントアップする要素もあるようです。
Rubyでいう、eachの繰り返し処理ですね、はい。大変お世話になりました。
このようにWordPressのテンプレートタグとは、WordPressの（特に）管理画面で設定、作成するデータをWeb上にアウトプットするものなんだ！
と今のところ理解しました。
初学者なので誤解があると思います、勉強進み次第修正していきます。
他にも
the_time();
投稿された時間を表示
the_ID()
投稿IDを表示（ループ内で使用）
the_category()
記事が属するカテゴリーへのリンクを表示（ループ内で使用）
the_permalink()
投稿の個別ページのURLを表示する
the_excerpt()
現在の投稿の抜粋を表示する
ここまで例をあげるとそういう気がしてきませんか？
今まではhtml, css, Ruby on RailsでWeb作成してきましたが、
WordPressのカスタマイズはWordPress内のデータをテンプレートタグを使用して自分の好きなように表示させるものだっというイメージでこれからも勉強していきたいと思います！！
Wordpress_mixhost_カスタマイズ方法
こんばんは、daissh04です。
今回はWordpressのカスタマイズ方法について、自分の備忘録として記事を書きたいと思います。
有名ブロガーの方がWordpressテーマを使用してのブログスタートアップを推奨しており、私もその通りにブログサイト立ち上げをしました。
レンタルサーバーとしてはmixhostを使用しています。
ただ提供されている情報としては、そこから記事の書き方に特化したもののみで、テーマのカスタマイズについてはあまり情報がありませんでした。
自分で書いたhtmlやcssをどうやったらwordpressに反映できるのか、そういった記事が少ない為、自分も壁に打ちあったので、執筆します。
なおレンタルサーバーによりやり方は異なるので、今回はmixhostのみに限定します
この記事は
・Wordpressのカスタマイズをしたいけどどうすればいいのかわからない人
・mixhostを使用したカスタマイズ方法を知りたい人
に対し、少しでも手助けになればと思っています。
まずはwordpressのディレクトリが保存されている場所についてです。
mixhostからcPanelを開きます
そして一番最初にくるファイルマネージャーを開いて下さい
すると下記画面が開きます
そしてここから
・public_html
・自分のブログのドメイン
・wp-content
・themes
と選択して下さい。
そうすると、wordpressテーマとしてダウンロードしたデータが並ぶはずです。つまりwordpressテーマのコードは全てここに格納されていることがわかります。
こんな形でphp、css、images、jsファイルが並びます。
カスタマイズする際は、
・編集するファイルをダウンロード
・自分のPCでコード編集、保存
・再度アップロード
・Wordpress管理者画面で表示の確認
といったプロセスを繰り返ししていきます。
私はMacBookを使用している為、コード編集には
Visual Studio Codeを使用しています。
本記事ではmixhostを使用したwordpressカスタマイズの概要を説明しました。
ここから私も勉強しながらですが、wordpressでのサイト構築のプロセスを一個づつ執筆していきたいと思います。
次回はphpファイルを実際に編集し、wordpress独特の関数等も交えながら一歩踏み込んだ記事を書いて行こうと思います。
