KITAMULABO

WordPressテーマ自作

"5件"の投稿があります

WordPressの標準ギャラリーをCSSでレスポンシブルな横スライダーに変更する

2021.2.5

WordPress標準のギャラリーは見た目パットしないですが、記事内から画像を追加できるのが非常に楽です。プラグインでギャラリー系を探しても、殆どの場合は管理画面で一度アルバムを作成してから記事にショートコードを埋め込むのでひと手間面倒。ということでプラグインを使わずにCSSだけでレスポンシブルなギャラリーを作ってみました。

実例

早速出来たものがこちら↑(画像は牧場です。意味はありません。)

ブラウザの幅によって表示の仕方が変わります。

PC等では4枚横1列で、スマホ等のモバイルでは1枚表示になって横スクロールになります。PCの方はぜひ、ブラウザの横幅を縮めてみてください。スマホの方も横にするとPC表示になるかも。

この動きCSSだけで上書きしています。

CSS

基本的には標準ギャラリーの書き出すクラスを調べて適宜!importantで上書きし、Flexboxでコントロールします。

@media screen and (max-width: 720px) {}でモバイル表示を指定。

個々の画像を .blocks-gallery-item{width:100vw!important;height:auto!important;}で画面幅いっぱいにし、大枠を.wp-block-gallery{overflow-x:auto;}でX方向のみスクロールバーが出るようにしています。

もともとはよくあるギャラリーのように進む、戻るの三角マークをポチポチ押すように考えていたのですが、今のブラウザってスマートスクロールが標準なんで、1回のフリップですい~っと進むこっちの方がタップが少なくて済むなとこのような形に落ち着きました。

なのでスマホでこのサイトを見る場合、ページのスクロールは縦方向に、ギャリーは横方向のフリップ操作となります。ちょっと気持ちよくないですか?

更に今回は思い切って、ページ全体のスクロールバーの表示をなくしています。PCの方はホイールボタン付きのマウスの使用、もしくはキーボードのカーソルキーを使用してください。

クリック時の動作

画像をクリックすると大きなスライド表示なりますが、こちらは素直にプラグインに頼っています。散々ためして結局落ち着いたのがJetpackの標準機能です。なかなか丁度いいんですよね。コメントをつけることも出来ますが、それはオプションでオフにしています。

まとめ

重いプラグインを導入しなくても、標準ギャラリー+CSSで個性的なギャラリーを作ることが出来ました。標準のパーツを活かすやり方は一番汎用性が高く、過去の記事にも反映しやすくておすすめです。

これで写真も見やすくなったので、しっかりカメラ撮っていこうと思います。

この記事がよかったら
:
:

CSSだけで作るタブメニューとウィジェット

2021.2.4

スペース的に最初から表示はしたくないけど、必要に応じて見せたいときに便利なタブメニュー。こちらをCSSだけで実装し、更にウィジェットと組み合わせて自由度の高いメニューを作ってみる方法を解説します。

ちなみに探してみましたが、スマートに導入できる既存のプラグインは見つけられませんでした。面倒なのでjavascript系も入れたくないという方にもおすすめです。

CSSでタブメニュー

わかりやすいのはこちらのサイト。

https://web.monogusa-note.com/flexible-tabs-only-css

仕組みとしてはHTMLでinputタグのラジオボタンを使っています。ラジオボタンは選択肢の中から1個だけ選べるタイプのフォームツール。選択されると<input>タグの中にcheckedがつくので、それをCSSで拾って表示/非表示を切り替えるというもの。CSSは隣接セレクタを使用していることが中々秀逸。

一番外側のラップは<nav>タグでも<div>タグでもいいです。<input>タグは隠して<label>タグの隣接要素を表示するようにしています。CSSで最低限必要なのはこんな感じでしょうか。この場合はインプットとラベル、その中身が交互に来ていますが、<label>タグに{order:-1;}を指定することでラベルだけ先に表示します。後はマウスオーバー時の装飾だったり、必要なものを追加します。

こちらは別パターン。ラベルを先に並べて、その中身を後に並べています。こちらの場合はタブの中身に1つずつ固有のIDかクラスをふっておかないと指定しにくいですが、一応これでも対応可能。

ちなみにこの表示の切り替え、visibility:hidden;でも同じようなことが出来ますし、そちらの方がアニメーション(Transition)も付けることが出来ますが、多めの折りたたみでは余計な余白がページ下部にできてしまうようで、今回はdisplay:none;としています。

ウィジェット化する

タブメニューができたら中身をウィジェットにしたいなと欲が出てきました。

やってみたのは3パターン。

①テーマ内でウィジェットエリアの記述の前にインプットとラベルを並べる

これは最終的な出力が上のコードで言うと下のパターンになるやり方です。とりあえずならこれが一番手っ取り早いですが、ウィジェットを設置するたびに、ウィジェットのはき出すタグを見て、CSSのIDかクラスを変更しないといけないので柔軟性が低いです。

②functions.php内でウィジェットのタグの出し方を指定

functions.php内でウィジェットエリアを定義するregister_sidebar()ではウィジェットの前後にはき出すタグをしてすることが出来ます。ここで<input>と<label>をくっつけてもOKです。これだと配置したウィジェットを自動的に指定するので、管理が現実的になります。ただし、1タブに1ウィジェットしか配置出来ません。1タブに更に複数のウィジェットを配置したい場合は次のパターンになります。

③タブごとにウィジェットエリアを指定する

ウィジェットじゃなくてウィジェットエリアを設定します。これでもっと使いやすくなりました。只今サイトのトップではこのような形で実装しています。

まとめ

ということでCSSだけでウィジェットエリアをタブメニュー化することが出来ました。意外と何でも出来ちゃいますね。ぜひお試しを。

この記事がよかったら
:
:

WordPressテーマで記事リストの出力をコントロールする

2021.2.3

WordPressではトップページやアーカイブページ等、記事リストの一覧を表示しますが、その表示の仕方をもっと柔軟に出力できるよう、色々試してみました。

よくある2つのパターン

配布されているテーマでもよく見かける一般的なやり方は次の2種類です。

どちらもメインループ内に記述するWordPressのテンプレート関数です。上のthe_excerpt()は抜粋を設定していればそれを表示、なければ本文を指定された文字数分だけカットして表示します。ただこれは本文中の文字情報だけを取得するので、画像とか他のタグも一覧内で表示させておきたいと言うときは使えません。

そんなときは下のthe_content()を使用します。こちらは単純に本文を表示させる関数ですが、本文中にmoreタグ(続きを読む)があればそこで切ってくれます。これなら文字情報だけに限らず任意の場所で切り出すことが可能です。ただしmoreタグを設定してない記事では全ての内容を表示してしまうことになります。今から新しいホームページを始めるならいいかもしれませんが、過去にさかのぼって全ての記事にmoreタグを入れ直すのは正直面倒くさいです。

PHPで条件分岐

ということで、どちらでも対応できない場合は自分で条件分けをするしかありません。改めて今回の更新でやりたかった動作をまとめてみます。

①moreタグがある場合はmoreタグでカットして表示
②短い記事は全文表
③長い記事は適当なところでカットして表示
④リストではなく単一ページの場合は全文表示

まずはメインループの中で本文全体を取得します。通常ならget_the_content()を使用するところですが、今回は$post->post_contentで呼び出したものをget_extended()に入れています。get_extended()はmoreタグの前後で本文をカットしてくれる関数で、moreタグ前を[‘main’]に後を[‘extended’]に入れられます。moreタグがなければ[‘extended’]は空になるので、$more_contentがあればmoreタグがあるよっていう条件分岐ができます。

次に本文が短いかどうかの判断はタグを除いた本文の文字数を数えます。

strip_tags()でタグを外し、mb_strlen()でマルチバイト換算で文字数をカウントします。短ければ切らずに出力します。しかしここで問題になるのが、この指定した文字数を超えた場合にどこで切るのかと言うことです。文字だけじゃないので単純に文字数で切ってしまうとレイアウトが崩壊します。色々悩んでこんな感じにしました。

多少長くなっていますが、ざっくりいうと2回めのpタグ、“<p”の位置を検索してそこで分けるという処理を行っています。

これでHTML的な構文が途切れずにきれいに本文を分けることが可能になりました。最終的に単一ページかどうかの判定も加えて出来たのが以下。

続きを読む~後半部分をアコーディオンにして、その場で展開

最後に、続きがある場合のみページリンクを出力、してもいいのですが、スマホで続けて読みやすいように、アコーディオンのようにその場で続きを展開できるようにしました。inputタグ+labelをCSSだけで非表示から表示に切り替えられます。CSSも合わせたこの動作については別記事で解説します。

まとめ

条件さえはっきり定義できれば、投稿リストもPHPで自由に出力することが出来ます。ぜひお試しを。

この記事がよかったら
:
:

WordPressテーマの自作におけるCSSのコツ

2021.2.2

テーマの自作で半分はCSSの調整だったりします。WordPressにおけるCSSのコツや最近取り入れてみたトレンド等をご紹介します。

テーマに関する記述を明記

インストールしているテーマ一覧でオリジナルなのにちゃんと解説があるとなんかテンション上がります。これはstyle.cssの冒頭に上の記述をするだけ。画像はテーマフォルダに「screenshot」という名前の画像ファイルを上げておけば読み込んでくれます。拡張子はjpgでもphpでもいいみたいです。

横並びに詰めて記述

CSSの記述の仕方ですが、僕はこうやって詰めて横並びに記述することが多いです。邪道なのはわかってるんですが、こうすることでページ全体が少なくすむので全体をまとめるのが早いような気がします。

!importantが重要

CSSで同じセレクタの優先度は原則、後に書いてあるほうが優先です。しかし、プログラムでいろんなCSSが読み込まれているWordPressでは、強制的に上書きしたい場合、以下のように!importantを付けておきます。

こうすることで既存のタグなど、はじめからWordPressがスタイルを指定しているものに対してもオリジナルのデザインにすることができます。上の例では既存のギャラリーのマージンを0に変更しています。

モバイル対応の記述

スマホやタブレット等のモバイルに対応してスタイルを変更したい場合は、画面サイズの最大値によって切り替えます。下記ではmax-widthが720pxまでの画面では以下のスタイルでって記述です。

最近はスマホでの閲覧が半分以上になってきているのでモバイル対応は必須。逆にPCでの閲覧を少数派として、〇〇以上の画面サイズに対して以下のスタイルを適用としてもいいです。どっちのスタイルの記述が少ないかで判断します。またこの記述はCSSの最後の方に書いておくほうがトラブルが少ないです。

Flexboxが今どきで便利

上記のモバイル対応等、ウィンドウ幅によってレイアウトを柔軟に変更するレスポンシブルデザインがトレンドです。レスポンシブルデザインに対応しやすいスタイル、Flexboxを導入してみました。フロートデザインはもう古いみたいですね。Flexboxかなり便利です。使い方、解説は下記のサイトがわかりやすいです。

セレクタを使いこなせ

CSSのセレクタはidやclassだけじゃない。最初の子要素、何番目の子要素、兄弟等、色んなセレクタがあって柔軟な指定が可能です。下記のサイト勉強なります。

疑似要素がおもしろい

::before と::after 2種類の疑似要素ってのがあって、セレクタの前後に任意の文字列を追加できるっていうスタイルがあるんですが、さらにaタグ等に::afterを合わせるとtitleとかを引っ張り出すことができるっていう。以下参考。

まとめ

CSSは知れば知るほど自由度がまして、色んな事ができるようになります。1年ぐらい経つとまた新しいトレンドも出てくるので面白いです。ぜひご活用ください。

この記事がよかったら
:
:

indexページ一枚から始めるWordPressテーマの自作

2021.2.1

自前のブログを用意しようと思うと、一番便利なのは2021年になってもWordPressっぽいです。他にもCMSは色々とあるようですが、プラグインの数、テーマの数、情報の数からかなり有利かと思われます。その中で面白いデザインをしたいと思うと、やはり市販のテーマでは限界があるというもの。このホームページも年一ペースで地道にオリジナルテーマを更新しています。できるだけ楽に始められるオリジナルテーマの制作をご紹介。

ポイントはできるだけシンプルに始めるということ。

最低限必要なスキル

HTMLの基本とCSSの基本+PHP構文の基本スキルが必要です。でも全てのタグを覚える必要はありません。基本的な記述とこれはHTMLなのかPHPなのかが判別できて、このタグなんだっけ?とかこんな機能あるかな?が調べられれば問題ありません。さらにWordPressはPHPで動いているので、そのIF分とかが書けるようになれば、ぐっと自由度が増します。

とりあえずindexページ1枚あれば良い

https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4

上の日本語Codexをみていただければわかるように、WordPressはトップページ、投稿ページ、固定ページ、カテゴリー一覧ページ等、いろいろなタイプのページをシステマチックに出力、それぞれのデザインを変えたり組み替えたりすることが可能ですが、最低限「index.php」があればページの表示ができます。それプラス、スタイルシート「style.css」を基本としてこのサイトも構築しました。

本当なら、ヘッダー・フッターは別ファイルに切り出して、アーカイブ一覧やカテゴリー表示で分けたりもできるのですが、1ファイルにまとまっておくと、複数ファイルを開く必要もなく一目できるので楽です。もちろんデザインはできるだけ同じような表示なるように考えておきますが、部分的な表示の切り替えは「index.php」内でPHPのIF文で対応します。あとは必要な機能に応じてfunction.phpとcomments.phpを追加する程度です。

うちのindex.phpはこんな感じです。<body>タグ内はページの構造によるので省略していますが、大枠はこれでOK。シンプルなHTML構文にところどころPHP構文が入っていますが、そこがWordPressで操作されるところです。WordPress独自の関数を使いながら必要な情報が表示されるように組み立てていきますが、どうしても必要な関数はそんなに多くないです。重要なポイントは下記2点。

<head>タグの最後に<?php wp_head(); ?>
<body>タグの最後に<?php wp_footer(); ?>
を記述することでWordPressが必要とするスタイルやスクリプトは自動で読み込まれるようになります。

また<body>タグ内に記述されている<?php body_class(); ?>は自動でページの種類をクラス名にしてくれます。これでCSSが指定しやすくなります。

メインループとなっているこの部分がWordPressの面白いところ。この中でトップページなのか、投稿リストの表示なのか、単一のページなのかを判別してうまいこと出力してくれます。

必要な条件分岐

phpのif文を使って条件分岐をすることができます。is_home()やis_archive()はページの種類を判別するWordPress関数です。以下リファレンス。

https://wpdocs.osdn.jp/%E6%9D%A1%E4%BB%B6%E5%88%86%E5%B2%90%E3%82%BF%E3%82%B0

やろうと思えばかなり複雑な条件分岐ができますが、実際使うのはそんなに多くありません。is_home()はトップかどうか、is_archive()はアーカイブ一覧ページかどうかで、日付・カテゴリー・タグ一覧も一緒に指定できます。他にis_singular() ってのが投稿ページでも固定ページでも単一ページの表示なら引っ掛けるってので便利でした。

ウィジェットを使う

WordPressの便利な機能が、「ウィジェット」と呼ばれるパーツを配置できる点。オリジナルテーマでもちゃんと設定しておけば使用することができます。indexページ内に以下の記述をして「ウィジェット」を配置できる「ウィジェットエリア」を設定します。

「widget-area1」は任意のエリアネームです。functin.php内に以下の記述をしてウィジェットエリアを定義します。

register_sidebarを複数個記述すれば、複数のウィジェットエリアを定義できます。これでウィジェットを使った自由度の高いホームページのデザインが可能になりました。

まとめ

WordPressは機能も情報もおおいですが、思った以上にシンプルにテーマを自作することができます。せっかく自身のサイトを作ろうってのに、人と同じデザインジャヤだよって方。ぜひチャレンジしてみてはいかがでしょうか?

この記事がよかったら
:
:

このページのトップへ戻る