CSSアルマナックを再編成します

CSS-Tricks Almanacは新しい外観を持っています！

私はあなたがすでにCSS -Tricks -Almanac（Yearbook）のこの大部分に精通していると信じています。ここでは、CSSセレクターとプロパティのリファレンスドキュメントを公開します。古代からこれを公開しています...または少なくとも2009年以来（元の作品のほとんどが完了したとき）。 Webページの時代には、それがほとんど時間の始まりでした。レスポンシブデザイン（BR）の1年目、またはレスポンシブデザイン（AR）の14年目と呼ぶこともできます。

レスポンシブデザインが以前とは大きく異なる後、14年目に今日CSSを書くことを伝える必要はありません。要するに、AlmanacはCSSのペースに追いついていません。これは、プロパティやセレクター以上のものです。実際、私たちはバックエンドでどのように構成されているかのために、Almanacを変更することに消極的であり、触れたときにそこに幽霊が1つか2つ見たと確信しています。

アルマナックへのアクセスでは、既存のプロパティとセレクターセクションに加えて、擬似クラスセレクター、関数、 @ルールの専用セクションを含む、より広範なCSS情報があります。私たちにはまだやるべきことがたくさんあります（助けてください！）が、アーキテクチャはすでに存在し、必要に応じて拡張する余地があります。

この仕事は簡単ではなく、私が思っていたほど怖いです。私がしていることのいくつかを連れて行ってください。

現在のステータス

初日からWordPressを誇らしげに実行しました。これには、特にテンプレートに関しては多くの利点があります。それはみんなのお気に入りではないかもしれませんが、私はそれに非常に満足しており、断固としてそれに専念しています。

WordPressに精通している場合、コンテンツは主に2つのタイプに分割されていることがわかります：

Pageおよび記事。 2つの違いは最小限です。どちらも同じ編集インターフェイスを使用しているため、ほとんど区別できません。もちろん、いくつかのニュアンスがありますが、ページ間の主な違いはレイヤー化されていることです。つまり、親子のページ関係を確立するのに最適であり、したがって、明確に構造化されたサイトマップを作成します。同時に、記事はメタデータにもっと焦点を当てており、タグを追加したり、カテゴリグループや指先で取得できるカスタム分類法に入れたりすることでコンテンツを整理できます。

almanacは、記事ではなくページ上に構築されています。アルマナックは、アルファベット順にたどり着く典型的なサイトマップフローを備えた高度に構造化された領域です。たとえば、

などのCSS属性のエントリには、Almanac→Property→A→Aspect比があります。 aspect-ratio

これはいいですね？悪くはありませんが、テンプレートでページをクエリすることは、フィルタリングなどのメタデータがより多くある記事よりも困難です。一方、ページはそうではありません。 （少なくとも明らかではありません。）それらは通常、階層構造を知っているため、構造化されたオブジェクトとして返されます。しかし、それはまた、アーカイブを自動的に生成するタグやカテゴリとは異なり、これらすべてのページを手動で作成する必要があることを意味します。 「プロパティ」ページのサブページである「A」の空のページを作成します。それ自体は、アルマナックのサブページです。これは、プロパティとセレクターの両方に対して行う必要があります。

本当の問題は、年鑑が不十分であることです。関数や @ルールなど、他のCSSコンテンツを投稿したいと考えていますが、Almanacはもともと2つのコンテンツセットを表示するために構築されていました。だから私たちは他に何も投稿しませんでした。これが、一般セレクターと擬似セレクターが同じバケツにある理由でもあります。

スペースを拡大するためにスペースを拡大することは私の仕事の範囲であり、私は途中でスタイリングする機会があることを知っています。

1つのテンプレートルールALL

それがそうすることです。最初のアプローチは、単一のテンプレートを使用して、アルマナックのインデックス作成と、セレクターとプロパティをリストするアルファベットページを処理することでした。これはとても賢いです。このページは、最初に現在のページがページの階層の上部にあるアルマナックページであるかどうかを確認します。このページの場合、テンプレートは、同じページの2つの列にセレクターと属性の結果を出力します。

このクエリは非常に印象的です。

<?php function letterOutput($letter, $selectorID, $propertyID) {
  $selector_query = new WP_Query(array(
    'post_type' => 'page',
    'post_status' => 'publish',
    'post_parent' => $selectorID,
    'posts_per_page' => -1,
    'orderby' => 'title',
    'order' => "ASC"
  ));

  $html = '<div>';
  $html .= '<div><a>' . $letter . '</a></div>';
  $html .= '<div>';

  while ($selector_query->have_posts()) : $selector_query->the_post();

    $html .= '<details><summary>';
    $html .= '<h2><code>';
    $html .= get_the_title();
    $html .= '</code></h2>';
    $html .= '</summary>';
    $html .= get_the_excerpt();
    $html .= '<code>';
    $html .= get_post_meta(get_the_id(), 'almanac_example_code', true);
    $html .= '</code>';
    $html .= '<a href="'%20.%20get_the_permalink()%20.%20'">Continue Reading</a>';
    $html .= '</details>';
  endwhile;

  $html .= "</div>";
  $html .= "</div>";

  return $html;
}

これは本当にコードスニペットの半分にすぎません。マークされているだけであることに注意してください。再び

にループします。 $selector_query $property_queryそこから、関数は26回呼び出す必要があります。アルファベットの文字ごとに1回。 3つのパラメーター、つまり、文字（a）と「a」ページ（例：14146、13712）のページID（セレクターとプロパティのサブページ）が必要です。

現在インデックスページにいない場合はどうなりますか？テンプレートは、その特定の部分（プロパティなど）のサブページの文字のリストを出力します。 1つのテンプレートで十分です。

<?php echo letterOutput("A", 14146, 13712);
  // B, C, D, E F, G, etc.
?>

Query subpage

関数を変更して、より多くのページIDを取得して他のパーツの文字ページを表示できます。しかし、正直なところ、私はそれをしたくありません。関数を2つではなく1ページIDパラメーターに削減することを選択し、次にテンプレートを分割しました。1つはメインインデックス用、もう1つは「サブパート」（もしあれば）です。はい、それは私のWordPressテーマディレクトリにもっと多くのテンプレートがあることを意味しますが、これは主に個人的には気にしません。私がいるサブページ（属性インデックス、セレクターインデックス、 @ルールインデックスなど）を確認し、これらのサブページの内容を個別に取得できます。

関数の別の問題は何ですか？生成されたすべてのタグは、while()ステートメントに挟まれています。単一のテンプレートスキーマを保持するために部分的にクエリを解析したい場合でも、致命的なPHPエラーや通知を引き起こすことなく、if()ステートメントをどこにでも配置したくないというわけではありません。繰り返しますが、機能を完全に変更することには興味がありません。

文字アーカイブ

これらのすべての文字セクションの空のサブページを投稿してから、正しい親ページに添付することは、多くの手動作業です。私は知っている、私がしたからです。もちろん、プログラミングのやり方もありますが、ページから記事へのコンテンツを変換し、その観点から始めることは私を引き付けませんでした。私たちは常に物事を行う「理想的な」方法を見つけることができるとは限りません。

WordPressによると、これらの文字ページのいずれかを「アーカイブ」と呼ぶことは誤称ですが、それはまさにさまざまなセクションのサブページを見る方法です - コンテンツがページではなく記事として構築された場合、擬似セレクターセクションがある場合は、AからZまでの個々のページが必要になります。これは、各擬似セレクターの親ページとして機能します。それぞれ26文字の3つの新しいセクションがあります。つまり、78ページを作成しました。素晴らしい。

Almanacページのパン粉（たとえば、

プロパティのこのページ）のパン粉を使用するか、任意のセクション（たとえば、プロパティのこのページ）の大文字をクリックすることで、文字ページにアクセスできます。 aspect-ratio

これらのページを真剣に受け止めたことはありません。それらは構造のために存在しますが、多くの人が彼らを訪問することはありません。彼らは本質的にプレースホルダーです。はい、しかし、それでもプレースホルダー。私たちはこれらのページについて非常に不cru慎なので、正式にスタイルを整えたことはありません。これは、あなたに何を伝えるCSS相続モデルです。

これは私が視覚的に磨く機会をとった場所です。数ヶ月前にこの仕事に戻って以来、私はデザインの巨大で大まかなことを扱ってきました。たとえば、特大のタイトルとあなたが見る厚い影。

これは私の自然な美学ではありませんが、CSS-trickとよく一致すると思います。たぶん、おそらく、クリス・コイヤの顔に喜びの涙が流れます。多分。

ナビゲーション

メインインデックスページに表示されるナビゲーションに別の拡張機能が追加されました。上部の文字ナビゲーションを各セクションに移動するナビゲーションに置き換えました。これにより、開発をバイパスせずにWordPressでページを直接編集できます。

私が気になるのは、管理インターフェイスから管理できる適切なWordPressメニューにするのではなく、ハードコードしたことです。

[TodoをTo-Doリストに追加します。 ]

Almanacインデックスを完全に表示されたセレクターと属性リストから解放したため、追加する多数の部品のインデックスとして実際に使用できます。

ある時点でのナビゲーションのメインページコンテンツの冗長性を低下させる必要があるかもしれませんが、これは私たちが構築できる良いスタートだと思います。また、タイトルに関しては、Webサイトのメインメニューにリンクされている他の「トップ」ページとより一致していますが、これは悪くありません。

ああ、ちなみに、ナビゲーションについて話すとき、新しいセクションが個々の年鑑の既存の左側のサイドバーに追加され、インデックスに戻ることなく他のエントリにジャンプするのに役立ちました。

Quick Reference

私が言及する最後の強化は小さいですが、私はそれがプラスの影響を持っていると思います。インデックスのサブページ（I.E、プロパティ、擬似クラス、関数、 @ルール）に移動すると、ページ全体にジャンプせずに各エントリのスニペットと高度な定義を取得できます。

私たちは常に「クイックアクセスの例」に大きな重点を置いてきましたが、これはこれを大幅に助けたと思います。

"できる[x] ..."

はい、改善する機会はまだたくさんあります。私の唯一の目標は、アルマナックがカバーするものが単なるセレクターやプロパティ以上のものであり、おそらくあちこちでいくつかのスタイリングであるように、物事を十分に変えることです。また、私はたくさんのことをしたいのですが、段階的にはいえ、私たちはそれをやるかもしれません。

どんなことですか？まあ、まず第一に、そのハードコーディングされたインデックスナビゲーション。しかし、さらに重要なことは、メインページを押し続けたいということです。以前は大きな役割を果たしていましたが、私はそれをほとんど拭き取りました。すべてのエントリをリストする方法を見つけて、すべてのセクションで、2つのセクションしかなかったときに行ったことを見つけてください。これが私が勉強する予定です。

はい、一般的な用語、メディア、ユーザーの選好クエリ、おそらく仕様など、より多くのCSSコンテンツをカバーしたいと考えています。 Almanacは私たちのチームのリソースであり、あなたと同じように、私たちは毎日それを参照しています。有用な情報がたくさんあることを願っています。

それだけです。

読みをやめて、アルマナックに直行して仮想散歩をすることができます。

以上がCSSアルマナックを再編成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。