検索結果を全文表示・抜粋表示

検索結果を全文表示・抜粋表示を編集して変更する。

場所

修正場所を考えてみる。
検索結果を表示させるのは、search.phpのようだ。
そのsearch.phpにある、get_template_part関数が修正すべき場所を指定している。

get_template_part( 'template-parts/content', 'search' );

このコードの意味は、「template-parts/content-search.php」が存在すれば「template-parts/content-search.php」、なければ「template-parts/content.php」が該当場所である、という意味だと思われる。

the_contentとthe_excerpt

the_content関数が全文表示、the_excerpt関数が抜粋表示。

ここからは実際の編集だが、ある程度はソースを読む必要がある。
今回は抜粋表示から全文表示に変更する。
「the_excerpt」を検索したが二箇所ある。どちらを修正すべきか。

if ( is_search() ) ~

これは「検索ページなら」という条件文。
この「if」範囲内に、「the_excerpt」は一つのみ存在を確認された。
そのthe_excerptを修正すればよい。

 

<?php the_excerpt(); ?>

以下のように修正した。

<?php //全文表示に the_excerpt(); ?>
<?php the_content(); //全文表示に ?>

以上です。

Batch Cat カテゴリーを一括して外す

日頃はオフでもよい。

使い方

「設定」で表示件数を多めにしておく。
「ツール」から実際のカテゴリー操作を行う。

下段にボタンがあり、「Set」は移動、「Add」は追加、「Drop」は削除(カテゴリーから外す)。
「Add」機能に関しては、WordPress標準機能として存在するため使用しないものと考えてもいい。

セレクトボックスでカテゴリーを選択し「Search」ボタンをクリック。
対象記事にチェックを入れる。
カテゴリー一覧から、はずしたいカテゴリーを選びチェックを入れる。
「Drop」ボタンを押します。

未使用 後日の宿題

関数が定義済みかどうか

if (function_exists( 'sparkling_posted_on' )) {~;}

多次元配列のソート

多次元配列の定義、よくわからない。
番号が振ってないということかな?
配列の配列であるいうことは間違いなさそうだ。

2次元配列と3次元配列の違いは、配列の中にある配列の要素数??が2と3の違い。
用語がよく分からん。
あとで調べておきます。

array_multisort()というのがソートできて便利らしい。

Breadcrumb NavXT

「Breadcrumb NavXT」はパンくずリストで構造化を促すプラグイン。

インストールするだけではだめで、テーマ編集から、コードを直接記入しないと動作しない。
記入コードですが、設定→ヘルプ→クイックスタートと進めば、記入例が載っています。
例えば以下のように書きます。

<!--Breadcrumb NavXT-->
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
<?php if (function_exists('bcn_display')) {bcn_display();} ?>
</div>
<!--Breadcrumb NavXT--><!--end-->

個別記事への記入場所

個別記事に記入しないと、話にならないです。
自分は先頭ではなく、試しに記事の末尾に記入することにしました。
となると個別記事本文を扱う場所を探さねばなりません。

場所はcontent-single.php。「template-parts」→「content-single.php」。

カテゴリーなどへの記入場所

カテゴリー記事へは記入することも可能。
例えばタイトルと本文の間、つまり閉じたheaderタグの次に記入。

当方では、archive.phpが該当する。

未確認な記述法

一行コメント

<?php //コメント ?>
この記述はあり。解決。

ifと一文

<?php if (true) hoge(); ?>
一文なら{}は不要。解決。
もちろん付してもいい。

ファイル末尾は省略できる?

<?php
~

これで終了して、?>で閉じてないのを見かけたんだが。
ファイル末尾だと省略していいのかな?

endif

endifを含まない

基本形。

<?php
if (~) {~;}
?>

endif必須

例えば以下のように{}を使わない書き方がある。
{}を使わない場合は、endifが必須だと思う。
endifで条件文は終了だけど、その後に続けて記入しても当然に構わない。

<?php if (~) : ?>
「この部分にHTMLソースを記述できる。echoなしで出力される。」
<?php endif; echo 'hello'; ?>

コメント欄をまとめて非表示にする

One Click Close Comments

まさにワンクリック、コメント欄の表示・非表示を切りかえる。
これは簡単、インストールするだけ。
投稿一覧に移動し、色の付いた丸をクリックして変更。

カテゴリーごとにコメント許可の変更

WordPressの標準機能。
投稿一覧で一括編集することが可能です。

WordPressのリンクのパス(url)の書き方

三つに分類

  • 絶対パス。
    「https://~」。
  • ルート相対パス。
    ルートから記述する。ルートは一番上ということ。
    「/category/~」。
  • 相対パス。
    説明割愛。ややこしいだけ、使わない方がいい。

画像へのリンク

リンク挿入機能で、推奨されるリンクテキストを一旦は生成しておく。
絶対パスからルート相対パスへ変更する。

内部リンクはルート相対パス

基本的には、内部リンクはルート相対パス。
リンク切れの確率が下がる。
さらにリンク切れ対策プラグインを導入したい。

ブログカードは多用すべきではない?

WordPressで標準で用意されているブログカードについて。
絶対urlでないと表示されない仕様です。
プラグインでリンク切れチェックができないので、リンク切れしない工夫が必要。

「https://~.com/?p=123」のようにidで指定するといいです。
これはパーマリンクの種類に関係なく使用できると思う。

この時に、画像や通常の内部リンクをルート相対パスに指定しておくと都合がいい。
つまり記事検索で「https://~.com/」と調べれば、ブログカード使用記事だけ選出できますね。

このブログカード、通常の内部リンクとは違うので管理しにくく、あまり多用すべきではないのかもしれない。

 

スラッグとローマ字

カテゴリーのスラッグとかでローマ字を使用するときがある。

方式

ヘボン式。訓令式。日本式?

ヘボン式はパスポートに使われる。
訓令式は内閣が公布したらしい。

さて何れを使用すべきであろうか。
訓令式が簡単なので、一度はこれを使用した。

しかし、今はこれでいいのか?と迷っている。
というのは、地名、例えば駅で見る駅名にはヘボン式が使われてるよね。
地名とか人名のスラッグを作ろうと思えば、ヘボン式のほうがしっくり来るような気もする。
検索したら、外人が発音しやすいのはヘボン式なのだそうだ。

でもヘボン式って難しいんだよね
う~ん、これは悩ましい。
今思うのは、スラッグはできるだけ英語にするのがいいだろう、ということだけだ。

訓令式に関して、少しメモします。
別に推奨しているわけではないです。

訓令式(頻度高)

  • ンは一字、n。
    ただしnyの時はどうしたものか。
    調査中。
  • シは、si。
  • フは、hu。
  • ザ行は、z。
  • wo、調査中。

訓令式(頻度低)

  • ダ行、da zi zu de do。
  • ジャ行とヂャ行は同じ、zya zyu zyo。

この記事は編集途中です。
必要を持って書き足していこうと思っています。
抜け落ち多くて失礼しました。

line-height

line-heightは単位なしで

emと%は効果が同じ。

単位なし数値で倍率指定するのがよい。
例えば1.5倍なら以下のように書く。
p {line-height: 1.5;}

単位をつけないほうがいい理由

単位としてはem・rem・%が考えられるが、単位ありだと子要素等への継承時に問題が生じる。
継承されるのは、親要素のfont-sizeを基準にした、計算結果としての実数値である。

単位なしの場合のみが、倍率を純粋に継承する。

line-heightの初期値

デフォルト値はnormal。
Chromeの場合、normalは1.5倍。1倍ではない。

その他

a要素にも反映される。
a要素にline-height指定しても、クリック範囲は変わらない。

!important 効かない時

使い方

WordPressなどで他人の用意したものを編集するのはたいへんである。
!important指定でうまくいく可能性は高い。
以下のように末尾に加えるだけだ。

p {color: #000 !important;}

優先度がある

セレクタには様々な指定方法があり、優先度があるようだ。
!important指定は、セレクタではないけど最強に上書きする。

結局は優先度の問題であり、点数評価されるものだ。
つまり、なんでも!importantでOKというわけではない。

!importantなら必ず効くというわけではない

!important指定されていたとして、その中でさらに優先度がある。
クラス名などを細かく指定することで優先度を上げることができる。

IDセレクタはクラスセレクタより優先される

点数の詳細とか、当サイトでは扱わない。
ただこれは知っておいたほうがいい。
IDセレクタで指定するのは極力避けたほうがいい。
クラスセレクタと同格でないため、クラスセレクタで上書きすることができない。
これは「CSS効かない現象」の気づきにくい原因の一つだ。

first-child CSS

first-childとは

一番最初に現れる子要素だけを対象にするという意味です。

使い方の一例。
pやh1のmargin-topを一定値とりたい。
でも本文の一番上にくる時はデザインが崩れるから、その時だけmargin-topを0にしたい。

書き方は半角スペースに注意

.entry-content :first-child {margin-top: 0;}

「:first-child」の前の半角スペースの有無で意味が変わってくるので注意。
この場合は.entry-contentクラス内で最初に来る子要素、という意味になる。
セレクタ指定されてないので、子要素がpでもh1でも適用される。

子要素を指定する場合

.entry-content p:first-child {margin-top: 0;}

一番最初に来る子要素がpである場合のみに、適用されるという意味。
このように子要素にセレクタ指定する場合は、「p:first-child」のように半角スペースを入れてはならない。

効かない場合の考えられる理由

  • 半角スペースの有無。
    上述を参照。
  • 子要素にセレクタ指定しても、「指定セレクタで一番最初に来る子要素」という意味にはならない。
  • !importantを忘れた。

nth-child

.entry-content :nth-child(1) {margin-top: 0;}

上のように記述しても同じ効果が得られると思われる。
nth-childは他にも利用方法があり、しかも複雑だ。
そういう意味では、どちらを使用すべきかといえば、単純なfirst-childのほうがいいような気はするが。
後日調べます。

 

備考。
擬似クラス?調査中。

動かないあるある CSS

なぜだ、なぜ動かん、絶対バグってるよ、オレが第一発見者だ。
皆さんも経験あるかと思います。
しかし動かない理由は本当に些細な事なのだ。

ドハマリする時の条件がわかりました。
やはり新しい難しいことをしようとするときだ。
調べまくりで試行錯誤するものだからイージーミスが見えない。
自分の知らない秘密があるに違いないと猛烈調べるわけ。
こういうときは頭を冷やす。簡単なものに置き換えてチェックする。

クラス名の見間違え

これは時間食った、ふざけんなですよ。

当サイトのテーマではサイドバー以外にも、ウィジェットを記事の下とかにつけれる。
両方ともwidgetクラスを使ってるからクラス名はほぼ同じと思ったのです。
h3タグはクラス名が違った。
widgettitleクラスとwidget-titleクラス。
いやーほんとくたびれたわ。

その他

セレクタを疑ったほうがいいね。
「,」がさ、「.div1, .div2, {~}」これもう動かないものね。

またすごく手こずった話がでたら追加しようと思います。

0の単位 CSS

length値といわれるものは、0なら単位不要。

CSSではlength値に対してtime値というのもあるようなんですね。
time値の場合は、0であっても単位が必要ということのようです。

time値を使わないのであれば、単位なしでいいということですね。
time値に関しては機会があれば後日調べてみたいと思います。

見出しで使われるテク

殺風景ブログから脱するためには避けて通れぬ道だ。
私は駆け出しのぽっと出レベルなので、調べながら楽しみながらこの記事を書こうと思う。
でもあんまりややこしいのは気が引ける。

今はこの記事はメモなので、ソースが気になる人は勝手にソースで見てください。
インラインで挿入していますので。
後日見やすくします。

font-weight

太字を使うとすれば見出しだろう。
いい機会だからメモしておく。
100~900までとあるが、normal(400)とbold(700)で十分だろう。

サンプル

これをベースとして角を丸めるというのをやってみたいね。

border-radius

とりあえず丸めてみるか。

サンプル

何だすごい簡単じゃないか。

サンプル

なるほどね。細かく指定できるみたいだけど単純な指定でよさそうだな。
ちょこっと丸めるだけでオシャレ感があるな。
先端恐怖症に優しい。

text-shadow

サンプル

shadowの色を少し薄くするのがコツか。

opacity

サンプル

透明化か。薄字とたいして変わらない。使わないかも。

box-shadow

サンプル

 

サンプル

 

サンプル

最後にtext-shadowとの組み合わせ。
確かに浮いてはみえる。

サンプル

文字の大きさに統一感を出す

まだスマホだけ変えるとかその知識がないので、とりあえずパソコン表示に集中しようと思う。

文字の大きさを整えていくが、他人の作ったものだからすべて調整できなくてもいいと考える。
記事本文の見栄えが最優先。
次にトップページとかウィジェット。

クラス指定の例

記事本文は「entry-content p」と指定すればいいだろう。
検索結果は「entry-summary p」かな。

単位は何を使うべきか

色んな情報が入り混じっていてよくわからない。

  • pxだと古いIEは大きさ調整できない?
  • rem使用でIEで一部バグがある?
    ただし条件が限定的であり、問題ない場合が多いかな?
  • オペラはrem非対応?

IEの利用者結構いるみたいだ。
でも不具合が生じる条件は限定的とある。
あとオペラだけどほとんどいなくないか?
あそこ確か中国が買い取ったんじゃなかたっけ。
日本人は使わないだろ。

結論を言うとrem指定を採用しようと思う。
本来従うべきものはCSSの規準であるべきであろう。
emやremを推奨しているようにみえる。

先に述べたように記事本文が是正されさえすればいいのだ。
rem使用に限っては、px指定も保険でいれるという手法がある。
オペラ対策なのでしょうね?
これは記事本文くらいに施せばいいと思う。

.entry-content p {
font-size: 16px;
font-size: 1.6rem;
}

ブラウザだが、やはり時勢にある程度従ったものを使うべきだと思う。
面倒くさいんで以上であります。

remとemの組み合わせ

.entry-content p {
font-size: 1.6rem;
margin-bottom: 1.4em;
}

例えば上のような場合、font-sizeはremでよいとしよう。
margin-bottomのemは、更新されたp要素のfont-sizeを基準にするようだ。
ちなみに、font-sizeとmargin-bottomの並び順は問わない。
この場合のemは親を参照しないということだ?

よくemの説明で親要素を参照するなどと見かけるが、表現が正しくないのかな?
親要素参照はfont-size限定か。
この場合のmarginは、その要素自身の値を参照しているようだ。

文字の大きさの初期化

html {
font-size:62.5%;
}

rem使用にあたって初期設定が必要と思われる。
このようにあらかじめ10pxにあわせておくのが主流だろうか?
16px × 62.5% = 10px

これに関しても注意点があると思う。
html {font-size:10px;}
と初期設定するという記事を見かけたが、たぶんこれは意味が無いのでは?
pxで問題ないのなら、終始pxを使えばいいわけだから。

あとhtmlでなくbodyに指定している記事を見かけたがこれも違うっぽい。
/*
この値をremは参照しない。
body {font-size:62.5%;}
*/

編集途中

margin

初期値

相対設定の場合、ブラウザの拡大縮小で、marginも拡大縮小する。
H1タグやpタグには、marginが予め設定されている。
Chromeの場合のpのnarginの初期値は以下のものと予想される。
p {margin:1em 0px;}

単位はどれがいいか

px・em(=%)・rem。
いずれを使用すべきかは状況によると思う。
見やすくする目的で、文字の大きさに対して指定する場合はemがいいだろう。

ブラウザ指定の初期値のまま使用せず、明示的に初期設定していくことが望ましい。

marginの相殺

marginには重要な性質がある。
2つの要素が上下に並んでいて、その両方にmarginが一定数値とられていたとする。
この場合のmarginは相殺されて、値の大きいmarginのみが反映される。
これをmarginの相殺という。
marginの相殺にはいくつかのパターンも有るようだ。

相殺を回避するには

片方の要素に、marginを使用せずpaddingで代用するという手法が考えられる。

書き方

h1 {margin: 0;}

一括指定
margin: 上 右 下 左;
margin、border、padding、すべて順番は一緒。

一部だけ指定。
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;

記事本文を見やすくする CSS

基礎知識

記事を見やすくするテクニックの一つ。
line-heigt

この記事の主役。
marginの相殺に関しても少し触れている。
margin

記事の上部を整える

  1. 記事タイトル。
  2. 投稿者名などheader情報。
  3. 記事本文。

このような順に並んでいるとして、2と3の間のmarginを考える。
当然に一定値でなければならないが、headerの方でmargin調整するようにした。

記事本文のmargin-topは0にしたい。
marginの相殺という性質はあるが、明示的に0指定した方がいいだろう。
記事の最上部にいずれの要素が来るかは不明だ。
その場合でも次のプロパティを使用することで解決できる。
first-child

記事主文のmargin

記事本文の主な構成は、p要素およびH系要素であろう。
H系要素は、H2のみを使用すると仮定する。

pやH2など主文のmarginだが、横方向は0でよいとして縦をどうするかである。
例外的にpre・imgなどを使用する場合もあり、その時でも一定marginをとりたい。
主文のmarginが0指定だと崩れる可能性が高い。

pの上下と、H2の下は、同数値とることにした。
H2のmargin-topに限って広めにとることで、段落にメリハリが出るだろう。

単位だが、remをベースにしたらいいと思う。
クラス指定は次のような感じだ。

.entry-content  p {~}

階層表示の崩れを直す

カテゴリー表示で子カテゴリーありだと、配置崩れがひどいので修正。

前提

  • テーマ「Sparkling」でのみ確認。
  • Chromeでのみ確認。
  • 子カテゴリーまでという状態で確認。

ウイジェットのクラス指定

ウィジェットのスタイルは統一したい。
サイドバー以外に、記事の下にウィジェットが配置するパターンもあるのだ。
結論だけ言うと、当テーマではwidgetクラスを使う。
LIの場合は次のように指定する。ULは省略しないほうがいいだろう。

.widget ul li {~}

行間はLIで設定

LIタグの基本値を先に決める。
margin-bottomは0にすべきだ。
入れ子構造により二重に取り、下が広くなりすぎるため。

  • margin-topで行間を調整した。他marginは0とした。
  • paddingは0とした。

子カテゴリーのズレはULで設定

子カテゴリーの配置は、右にずらさねばならない。
UL(親のpadding)で調整か、LI(子のmargin)で調整のいずれかだが。

今回はULで調整した。
LIで何回も計算させるよりスマートなはず、と仮定した。
現時点では問題ないようにみえる。

  • padding-leftで横ズレを調整した。他paddingは0とした。
  • marginは0とした。

全体のバランス

見栄えをよくするためには、全体を見る必要がある。
margin-topのみ設定するということで、上が空きすぎたとする。
その場合、上に位置する要素にもmarginかpaddigが設定されているはずで、そちらでスタイル調整する。

コメント投稿のウェブサイト欄を消してみた

コメント投稿のウェブサイト投稿欄を消すのに挑戦した際の備忘録です。

でも現在は、コメント投稿フォームのカスタマイズはしない事にしました。
アラシ対策が面倒という事で、コメント自体を受けつけないことにした。

というわけなので、参考程度に読んでね。

CSSによる方法もある。
CSSで非表示

編集場所はどこか

今回はadd_filterによるカスタマイズ。
これは、通常はfunctions.phpに追加するのが普通ということでしょうか。
comments.phpとか探す必要はないということですね。

当方ではfunctions.phpに追加して、動作しました。

編集の全文

実際に当サイトで使ってみた全文を、まずは示します

add_filter('comment_form_default_fields' , function($arg){
$arg['url'] = '';
return $arg;
});
add_filter('comment_form_defaults' , function($arg){
$arg['comment_notes_before'] = '<p class="comment-notes"><span id="email-notes">'
. 'メアド入力は任意です。表示されません。'
. '</span></p>';
return $arg;
});

前半の数行

add_filter('comment_form_default_fields' , function($arg){
$arg['url'] = '';
return $arg;
});

'url'の部分が、ウェブサイト投稿欄を指定している。
さらにメールアドレス投稿欄も削除する場合、$arg['email'] = '';の一文を加える。
つまり変更したいものだけを指定すればいい。

途中からfunction定義に移っていく。
無名関数を使う。
関数名を定義すると外部に干渉することがあると聞いた。
それで関数名を指定しない方法をとりました。

function ($arg) とあります。()の中、つまり引数は省略不可。

後半の数行

add_filter('comment_form_defaults' , function($arg){
$arg['comment_notes_before'] = '<p class="comment-notes"><span id="email-notes">'
. 'メアド入力は任意です。表示されません。'
. '</span></p>';
return $arg;
});

外に影響しないので、変数名は同じもの(今回はarg)を使ってよい。

メアドに関する注意書きの文を変更する。
この指定内容はHTMLタグを含む。

「メールアドレスが公開されることはありません。」が初期値。
好みの文に変更する。

メールを任意とする場合

メールを任意とする場合は、管理画面からその設定をする。
またCSSで、displayがnoneになってないか確認する。