“Ability proceeds from a fusion of skills, knowledge, understanding and imagination, consolidated by experience.”
MICHAEL KLARKE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare porttitor ipsum a mollis. Pellentesque sagittis enim ac libero luctus, at vulputate ante lobortis. Praesent lacinia, leo sit amet congue malesuada.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor ins.
RECENT ARTCLES
lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ets unsers.
カスタムフィールドを使いこなしてWordPressを「単なるブログ」から「使えるシステム」に進化させる
こんにちは、のすけです。「WordPressって言うてもブログでしょ。」いや、違います！！カスタムフィールドがあります！！ということで今回は、あなたのWordPressを単なるブログからシステムに進化させる方法をこっそり教えたいと思います。 本文じゃ色々と足りない カスタムフィールドとは 頼れる相棒「Advanced Custom Fields」さん 使ってみる フィールドを入力 ルールを登録 位置を追加 カスタムフィールドを表示させるテンプレートを作る コンテンツをフィールドごとに適切に表示 まとめ 本文じゃ色々と足りない WordPressにある「投稿」では次のような項目があると思います。 タイトル 本文 カテゴリ タグ でもこれだけだと正直、記事の投稿くらいにしか使えません。もっと、例えば音楽アーティストのページだったら イベント情報を出したくて 「ライブハウスの名前」 「住所」 「時間」 「曲目」 なんて情報の入力項目が欲しいかもしれません。もっと、例えば、不動産会社のページなら 「部屋の名前」 「所在地」 「最寄駅」 「築年月」 「間取り」 「価格」 なんて情報の入力項目が欲しいかもしれません。でも、通常のままだと全部「本文」に入れるしかありません。もっと項目を増やせたらいいのに。。。=> 増やせます。カスタムフィールドで！しかも、住所に情報を入れたら自動的にGoogleMapで表示させるとか、いちいちテーブルタグを書かないで表を作るなども自由自在です。 カスタムフィールドとは [...]
WordPress任意のCSSやJavascriptを読み込む方法 (Bootstrapなど)
こんにちは、のすけです。WordPressを弄っていると、独自のCSSやJavascriptを使って整えたくなってきますよね。そんなCSSやJSを作成して変更する方法を紹介します。(デザインについては特に触れません) 簡単だけど諸刃の剣な方法 概要 書き方 CSSやJavascriptの置き場所 置いたスクリプトをWordPressで読み込むように登録する 簡単だけど諸刃の剣な方法 一番簡単な手法としては、管理画面の[外観] - [CSS編集]からCSSについては編集できます。テーマのCSS編集この画面では、CSSの変更結果を微調整しながらカキカキできるのが利点で、とても便利なのです。プレビューを確認しながら変更できるので便利ではありますその他の手法として、[外観]-[テーマ編集]からテーマの「style.css」に追記数する手法もあります。style.cssはテーマ用なので別ファイルで管理したいしかし、問題もあります。 このCSSはテーマの設定値として紐づいているので、テーマを変えると消えてしまいますし テーマのアップデートで消えてしまったこともあります。 また、テーマ編集については、そもそもこの画面から編集するのは危険です。間違ってからのテキストデータがPOSTされた場合全て消えてしまう可能性もあります。(一度ありました。) 膨大な時間を掛けて構築したCSSが消えてしまうと、もう呆然となってしまいます。。 そのため、Web一般で用いられているように、外部ファイルとして保存されたCSSやJavascriptを利用して編集する手法を取りたいと思います。ローカルにソースファイルを保持できるので、万が一サーバー上のファイルが消えても復旧可能なので、やはりこっちの方がしっくりきます。 またbootstrapなどの任意のCSSフレームワークを入れたいなんて要望もあるかと思います。 概要 やり方の概要としては「wp enqueue script」関数を利用して、登録を行います。 header.phpに直接書くやり方ももちろんありますが、WordPressの機能を利用して登録していくのが一般的なようです。 関数リファレンス/wp enqueue script - WordPress Codex 日本語版 書き方 以下のように、functions.phpの最後の行に追記します。なお、編集する際にはコピーを取って戻せるようにしてください。 間違って記述するとサイトが動かなくなります。書き方例： /** * スクリプトとスタイルを正しくエンキューする方法 */ [...]
WordPressアーカイブページをカスタマイズ。カスタム投稿タイプも対応します。
こんにちは、今回はWordPressのアーカイブ機能カスタマイズしていきます。 アーカイブ表示とは？ アーカイブページは「archive.php」を作れば良い アーカイブページのタイトル 個別投稿ページへのリンク 記事の抜粋 ページング カスタム投稿タイプにも一覧機能をつけたい WP_Queryでカスタム投稿を取り出す！ アーカイブ表示とは？ そもそも、アーカイブ機能とは何でしょうか？投稿や固定ページとは違ってあまり馴染みのない機能なのではないでしょうか。 でも、実は重要です。 アーカイブとは記事を一覧表示する機能なので、投稿一覧をいい感じに作ることができるものです。 例えば通常、カテゴリーをクリックした際に、そのカテゴリーに属する記事が一覧で表示されると思いますが、そのページがアーカイブページになります。 カテゴリーの他にも、タグや、日付(日別・月別・年別)での結果もアーカイブページになります。 カスタム投稿タイプで新しく別の投稿タイプを作成した時に、それぞれ別のレイアウトの一覧ページを作りたい！なんて要望もあると思います。 例えば通常はリスト表示が多いのですが、これをグリッド形式にしてアルファブログにあるような形に整形することも可能です。 アーカイブページは「archive.php」を作れば良い それではアーカイブページを作っていきます。 と言っても、アーカイブページの作り方は、固定ページや投稿ページと同じです。 WordPressループを利用し、テンプレートタグを使って必要な情報を揃えていけば良いだけです。 まずは、いつもの基本的な記述で作ってみましょう。 archive.php <?php get_header(); ?> <?php while ( have_posts() ) : the_post(); ?> <article [...]
個別投稿ページで利用できるテンプレートタグまとめ
日付系タグ echoを使ったやり方 カテゴリーの表示タグ タグの表示 著者の表示 前後の記事へのリンクを表示する ページ分割した記事を表示する 日付系タグ the_date() ：公開日時を表示。一覧の場合は最初の１記事しか表示されない。 the_modified_date()：更新日時を表示 the_time()：一覧表示で日付を表示する場合はこちらを利用 <?php the_time('Y/m/d'); ?>や <?php the_time('Y年m月d日'); ?>のように日付タグは()中にフォーマットを指定することができます。 echoを使ったやり方 <?php echo get_the_date(); ?> このようにechoを使ってgetメソッドで取得した値を表示させる方法もあります。 利点としては、the_date() と違い何度も利用できます。 カテゴリーの表示タグ the_category()：カテゴリーの表示 利用例：<?php the_category(); ?> 初期表示ではリストになります。(「ねこ」と「いぬ」カテゴリに属している例) <ul class="post-categories"> <li><a [...]
WordPressテーマの投稿ページのテンプレートを作成する
こんにちは、前回は固定ページのテンプレートを作成しました。 hollywis.hatenablog.com 今回、第11回目は投稿ページのテンプレートを作成していきます。 投稿ページのテーマの作成方法 投稿ページのデザインの使い分ける方法 カスタム投稿タイプを作る カスタム投稿タイプ用のテンプレートを作成する 投稿ページのテーマの作成方法 投稿ページはWordPressで定期的な記事の投稿時に利用する機能です。ブログ機能とも言えますが、投稿タイプを増やすことで様々な投稿に対応しています。 今回はこの投稿ページのテンプレートの作成方法をご紹介します。 投稿ページのテンプレートを作成することで、その他のページと独立して自由にデザインを設定することができます。 テンプレートファイル名は予め決まっており「single.php」になります。 もしテーマの中にsingle.phpがある場合、投稿ページを表示する際の挙動が、index.phpよりもsingle.phpの方が表示優先度が高くなります。 この仕組みを利用して、投稿ページのテンプレートを作ります。 それでは実際に書いて見ましょう。 「single.php」というファイル名でテーマ直下に新規作成し、次のようにコードを記載します。 single.php <?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title() ?>：single.phpによる投稿ページ</h1> <div> <?php the_content(); ?> </div> <?php endwhile; [...]
WordPressテーマの固定ページのテンプレートを作成する
こんにちは、今回はWordPressのテーマの固定ページを作成またはカスタマイズする方法を紹介します。 前回はコンテンツん出し方でWordPressループについて触れました。 今回は第９回目、前回の実践編という位置付けです。 hollywis.hatenablog.com 固定ページのテーマの作成方法 共通のヘッダーやフッターを付ける 共通のサイドバーを付ける 固定ページのデザインの使い分け 固定ページ用のページ毎に違うidやclassを自動的に埋め込む 固定ページテンプレートを複数作る 固定ページのテーマの作成方法 固定ページはWordPressで定期的な記事の投稿ではなく、トップページや会社概要などの静的情報を表示したい時に利用する機能です。 この固定ページのテーマの作成方法をご紹介します。 まず、固定ページのテンプレートファイルを作成することで実現します。 ファイル名は予め決まっており「page.php」になります。 もしテーマの中にpage.phpがある場合、固定ページを表示する際の挙動が、index.phpよりもpage.phpの方が表示優先度が高くなります。 この仕組みを利用して、固定ページのテンプレートを作ります。 それでは実際に書いて見ましょう。 page.php <?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title() ?>：page.phpによる固定ページ</h1> <div> <?php the_content(); ?> </div> [...]
