ওয়ার্ডপ্রেস লুপের ভিতরে একাধিক সিএসএস অ্যাঙ্কর এবং পপওভারগুলির সাথে কাজ করা

আমি জানি, সুপার কুলুঙ্গি, তবে এটি সত্যিই কোনও লুপ হতে পারে। চ্যালেঞ্জটি একই পৃষ্ঠায় একাধিক সরঞ্জামদণ্ড রয়েছে যা ব্যবহার করে পপওভার এপিআই টগল করার জন্য মঙ্গল এবং সিএসএস অ্যাঙ্কর পজিশনিং তার নিজ নিজ অ্যাঙ্কর উপাদানটিতে একটি সরঞ্জামদণ্ড সংযুক্ত করার জন্য।

পপওভারগুলির সাথে কাজ করার সময় প্রচুর চলমান টুকরো রয়েছে:

• ক popover একটি আইডি প্রয়োজন (এবং একটি অ্যাক্সেসযোগ্য ভূমিকা আমরা যখন এটি আছি)।
• ক popovertarget যে আইডি উল্লেখ করা প্রয়োজন।
• আইডিগুলি শব্দার্থবিজ্ঞানের জন্য অনন্য হতে হবে, হ্যাঁ, তবে এও হুক করতে popover মধ্যে একটি popovertarget।

এটি কেবল পপওভার এপিআইয়ের সাথে ডিল করা অংশ। অ্যাঙ্করগুলিতে পরিণত:

• একটি অ্যাঙ্কর একটি প্রয়োজন anchor-name।
• একটি লক্ষ্য উপাদান এটি উল্লেখ করা প্রয়োজন anchor-name।
• প্রতিটি anchor-name লক্ষ্যটি তার নোঙ্গরটিতে সঠিকভাবে সংযুক্ত করতে অবশ্যই অনন্য হতে হবে।

প্রয়োজনীয়তাগুলি নিজেরাই চ্যালেঞ্জিং। তবে এটি একটি লুপের অভ্যন্তরে কাজ করা আরও চ্যালেঞ্জিং কারণ আপনার অনন্য আইডি এবং অ্যাঙ্কর নাম তৈরি করার একটি উপায় প্রয়োজন যাতে পৃষ্ঠার অন্যান্য উপাদানগুলির সাথে বিরোধী না করে সবকিছু সঠিকভাবে আবদ্ধ হয়। ওয়ার্ডপ্রেসে, আমরা পৃষ্ঠা অবজেক্টগুলির একটি অ্যারে জিজ্ঞাসা করি:

$property_query = new WP_Query(array(
  'post_type' => 'page',
  'post_status' => 'publish',
  'posts_per_page' => -1, // Query them all!
  'orderby' => 'title',
  'order' => "ASC"
));

আমরা আমাদের প্রবেশের আগে while() বিবৃতি আমি এইচটিএমএল আউট করতে চাই। এইভাবে আমি এর ধারকটির ভিতরে দেখতে কোনও পৃষ্ঠা অবজেক্টটি চাই:

<div class="almanac-group">
  <div class="group-letter"><a href="#">A</a></div>
  <div class="group-list">
    <details id="" class="group-item">
      <summary>
        <h2><code>accent-color</code></h2>
      </summary>
    </details>

    <!-- Repeat for all properties -->
  </div>
</div>

<!-- Repeat for the entire alphabet -->

ঠিক আছে, আসুন আমরা এখানে থাকাকালীন টুলটিপ মার্কআপটি আটকান, ঠিক ভিতরে ফোকাস করছি <details> উপাদান যেহেতু এটি একটি একক পৃষ্ঠা উপস্থাপন করে।

<details id="page" class="group-item">
  <summary>
    <h2><code>accent-color</code></h2>

    <span id="tooltip" class="tooltip">
      <!-- Popover Target and Anchor -->
      <button class="info-tip-button" aria-labelledby="experimental-label" popovertarget="experimental-label">  
        <!-- etc. -->
      </button>

      <!-- Popover and Anchor Target -->
      <div popover id="experimental-label" class="info-tip-content" role="tooltip">
        Experimental feature
      </div>
    </span>
  </summary>
</details>

আমার সাথে এখন পর্যন্ত? আমরা জিনিসগুলির পপওভার দিক দিয়ে শুরু করব। এই মুহূর্তে আমরা একটি আছে <button> যে একটি সাথে সংযুক্ত <div popover>। প্রাক্তন টগলস পরবর্তী সময়ে ক্লিক করা।

স্টাইলিং আসলে আমরা যা বলছি তা নয়, তবে এটি কয়েকটি পপওভার জিনিসগুলি পুনরায় সেট করতে সহায়তা করে যাতে এটি সেই সীমানা পায় না এবং সরাসরি পৃষ্ঠার কেন্দ্রে বসে থাকে। আপনি চাইবেন মিশেল বার্কারের নিবন্ধটি দেখুন কিছু দুর্দান্ত টিপসের জন্য যা এটি ক্রমান্বয়ে বাড়িয়ে তোলে।

.info-tip {
  position: relative; /* Sets containment */

  /* Bail if Anchor Positioning is not supported */
  (popovertarget) {
    display: none;
  }

  /* Style things up if Anchor Positioning is supported */
  @supports (anchor-name: --infotip) {

    (popovertarget) {
      display: inline;
      position: relative;
    }

    (popover) {
      border: 0; /* Removes default border */
      margin: 0; /* Resets placement */
      position: absolute; /* Required */
  }
}

এটি এমন একটি পয়েন্ট যেখানে আপনি ক্রোম ব্যবহার শুরু করতে চান কারণ সাফারি এবং ফায়ারফক্স এখনও বৈশিষ্ট্যটিকে সমর্থন করার জন্য কাজ করছে।

আমরা ভাল করছি! এই মুহুর্তে বড় চুক্তিটি টুলটিপের সামগ্রীটি স্থাপন করছে যাতে এটি বোতামের পাশে থাকে। এখানেই আমরা অ্যাঙ্কর পজিশনিংয়ের সাথে কাজ শুরু করতে পারি। জুয়ান ডিয়েগোর গাইড হ’ল মৌমাছির হাঁটু আপনি যদি গভীর ডুব খুঁজছেন। সংক্ষিপ্ত বিবরণটি হ’ল আমরা সিএসএসে একটি অ্যাঙ্করকে তার লক্ষ্য উপাদানটির সাথে সংযুক্ত করতে পারি। প্রথমত, আমরা নিবন্ধন <button> অ্যাঙ্কর উপাদান হিসাবে এটি একটি প্রদান করে anchor-name। তারপরে আমরা অ্যাঙ্কর <div popover> কাছে <button> সঙ্গে position-anchor এবং ব্যবহার করুন anchor() এর ইনসেট বৈশিষ্ট্যগুলিতে কাজ করুন এটি যেখানে আমরা চাই ঠিক সেখানে অবস্থান করতে <button>::

.tooltip {
  position: relative; /* Sets containment */

  /* Bail if Anchor Positioning is not supported */
  (popovertarget) {
    display: none;
  }

  /* Style things up if Anchor Positioning is supported */
  @supports (anchor-name: --tooltip) {

    (popovertarget) {
      anchor-name: --tooltip;
      display: inline;
      position: relative;
    }

    (popover) {
      border: 0; /* Removes default border */
      margin: 0; /* Resets placement */
      position: absolute; /* Required */
      position-anchor: --tooltip;
      top: anchor(--tooltip -15%);
      left: anchor(--tooltip 110%);
    }
  }
}

এই আমরা ঠিক তাই চাই! আমরা যখন পৃষ্ঠায় আরও সরঞ্জামগুলি যুক্ত করার চেষ্টা করি তখন এটি আরও জটিল যেখানে এটি আরও জটিল। লক্ষ্য করুন যে উভয় বোতাম একই টুলটিপটি কুল করতে চায়।

এটা ভাল না। আমাদের যা দরকার তা হ’ল প্রতিটি টুলটিপের জন্য একটি অনন্য আইডি। আমি এইচটিএমএলকে সরল করব তাই আমরা সঠিক স্পটটি দেখছি:

<details>
  <!-- ...  -->

    <!-- Popover Target and Anchor -->
    <button class="info-tip-button" aria-labelledby="experimental-label" popovertarget="experimental-label">  
      <!-- ... -->
    </button>

    <!-- Popover and Anchor Target -->
    <div popover id="experimental-label" class="info-tip-content" role="tooltip">
      Experimental feature
    </div>
    
    <!-- ... -->

</details>

পপওভার একটি আইডি আছে #experimental-label। অ্যাঙ্কর এটি উল্লেখ করে popovertarget বৈশিষ্ট্য। এটি তাদের সংযুক্ত করে তবে পৃষ্ঠায় থাকা অন্যান্য সরঞ্জামদণ্ডগুলিও সংযুক্ত করে। আদর্শ কী হবে তা হ’ল আইডির ক্রম, যেমন:

<!-- Popover and Anchor Target -->
<div popover id="experimental-label-1" class="info-tip-content" role="tooltip"> ... </div>
<div popover id="experimental-label-2" class="info-tip-content" role="tooltip"> ... </div>
<div popover id="experimental-label-3" class="info-tip-content" role="tooltip"> ... </div>
<!-- and so on... -->

আমরা পৃষ্ঠাটি ক্যোয়ারীকে এমন একটি ফাংশনে তৈরি করতে পারি যা আমরা কল করি:

function letterOutput($letter, $propertyID) {
  $property_query = new WP_Query(array(
    'post_type' => 'page',
    'post_status' => 'publish',
    'posts_per_page' => -1, // Query them all!
    'orderby' => 'title',
    'order' => "ASC"
  ));
}

এবং ফাংশনটি কল করার সময়, আমরা দুটি যুক্তি নেব যা কেবলমাত্র আমি যা কাজ করছি তার সাথে সুনির্দিষ্ট। আপনি যদি কৌতূহলী হন তবে আমাদের কাছে পৃষ্ঠাগুলির একটি কাঠামোগত সেট রয়েছে যা আলমানাক → টাইপ → অক্ষর → বৈশিষ্ট্য (যেমন, আলমানাক → বৈশিষ্ট্যগুলি → এ → accent-color)। এই ফাংশনটি একটি “চিঠি” এর শিশু পৃষ্ঠাগুলি আউটপুট করে (অর্থাত্, একটি → accent-color, anchor-nameইত্যাদি)। একটি শিশু পৃষ্ঠা একটি “পরীক্ষামূলক” সিএসএস বৈশিষ্ট্য হতে পারে এবং আমরা প্রতিটি পরীক্ষামূলক বৈশিষ্ট্যের পাশের টুলটপগুলি সহ ইউআইতে চিহ্নিত করছি।

আমরা এইচটিএমএলকে এমন একটি বস্তুর মধ্যে রাখব যা ফাংশনটি কল করার সময় আমরা ফিরে আসতে পারি। আমি ব্রেভিটির জন্য এটি কেটে ফেলব …

$html .= '<details id="page" class="group-item">';
$html .=   '<summary>';
$html .=     '<h2><code>accent-color</code></h2>';
$html .=     '<span id="tooltip" class="tooltip">';
$html .=       '<button class="info-tip-button" aria-labelledby="experimental-label" popovertarget="experimental-label">  ';
// ...
$html .=       '</button>';
$html .=       '<div popover id="experimental-label" class="info-tip-content" role="tooltip">';
// ...
$html .=       '</div>';
$html .=     '</span>';
$html .=   '</summary>';
$html .= '</details>';

return $html;

ওয়ার্ডপ্রেসের কিছু ফাংশন রয়েছে যা আমরা এই মার্কআপের মাধ্যমে লুপিংয়ের জন্য উপার্জন করতে পারি। উদাহরণস্বরূপ, আমরা সন্নিবেশ করতে পারি the_title() হার্ডকোডড পোস্ট শিরোনামের জায়গায়:

$html .= '<h2><code>' . get_the_title(); . '</code></h2>';

আমরাও ব্যবহার করতে পারি get_the_id() পোস্টের সাথে সম্পর্কিত অনন্য শনাক্তকারী সন্নিবেশ করতে। উদাহরণস্বরূপ, আমরা এটি প্রতিটি দিতে ব্যবহার করতে পারি <details> উপাদান একটি অনন্য আইডি:

$html .= '<details id="page-' . get_the_id(); . '" class="group-item">';

পপওভারগুলির জন্য প্রয়োজনীয় অনন্য শনাক্তকারীগুলি পাওয়ার জন্য এটি গোপন সস:

// Outputs something like `id="experimental-label-12345"`
$html .= '<div popover id="experimental-label-' . get_the_id(); . '" class="info-tip-content" role="tooltip">';

আমরা ঠিক একই জিনিস করতে পারি <button> যাতে প্রতিটি বোতামটি ডান পপওভারে তারযুক্ত হয়:

$html .= '<button class="info-tip-button" aria-labelledby="experimental-label-' . get_the_id(); . '" popovertarget="experimental-label">  ';

আমাদের একই জিনিস করা উচিত .tooltip একে অপরের থেকে আলাদা করার জন্য উপাদান:

$html .= '<span id="tooltip-' . get_the_id(); . '" class="tooltip">';

আমি কোডপেন ডেমোতে ঠিক একটি ওয়ার্ডপ্রেস উদাহরণ পুনরায় তৈরি করতে পারি না, তবে এখানে অনুরূপ মার্কআপ সহ একটি সরল উদাহরণ রয়েছে:

পপওভার কাজ! একটি ক্লিক করা একটি এটি নিজ নিজ ট্রিগার popover উপাদান। আপনি যে সমস্যাটি বুঝতে পেরেছেন তা হ’ল লক্ষ্যগুলি উভয়ই একই অ্যাঙ্কর উপাদানগুলির সাথে সংযুক্ত – সুতরাং দেখে মনে হচ্ছে আমরা একই ট্রিগার করছি popover উভয় বোতাম ক্লিক করার সময়!

এটি জিনিসগুলির সিএসএস পক্ষ। আমাদের যা প্রয়োজন তা হ’ল প্রতিটি নোঙ্গরে অনন্য শনাক্তকারী প্রয়োগ করার অনুরূপ উপায়, তবে আইডির পরিবর্তে ড্যাশড-ইডেন্ট হিসাবে। এরকম কিছু:

/* First tooltip */
#info-tip-1 {
  (popovertarget) {
    anchor-name: --infotip-1;
  }

  (popover) {
    position-anchor: --infotip-1;
    top: anchor(--infotip-1 -15%);
    left: anchor(--infotip-1 100%);
  }
}

/* Second tooltip */
#info-tip-2 {
  (popovertarget) {
    anchor-name: --infotip-1;
  }

  (popover) {
    position-anchor: --infotip-1;
    top: anchor(--infotip-1 -15%);
    left: anchor(--infotip-1 100%);
  }
}

/* Rest of tooltips... */

এখানেই আমার মনে হয় আমাকে কোনও আপস করতে হয়েছিল। আমি একটি লিভারেজ করতে পারে @for অনন্য শনাক্তকারী উত্পন্ন করতে সাসের লুপ তবে তারপরে আমি একটি নতুন নির্ভরতা প্রবর্তন করব। আমিও ফেলে দিতে পারি <style> ওয়ার্ডপ্রেস টেম্পলেটটিতে সরাসরি ট্যাগ করুন এবং একই পোস্ট সনাক্তকারী উত্পন্ন করতে একই ফাংশনগুলি ব্যবহার করুন তবে তারপরে আমি পিএইচপি -তে স্টাইলগুলি বজায় রাখছি।

আমি পরেরটি বেছে নিয়েছি। আমি ড্যাশড-আইডেন্টগুলি পছন্দ করি যা আইডিএসের সাথে সেট করে .tooltip এবং popover। এটি সুন্দর নয়, তবে এটি কাজ করে:

$html .= '
<style>
  #info-tip-' . get_the_id() . ' {
    (popovertarget) {
      anchor-name: --infotip-' . get_the_id() . ';
    }

    (popover) {
      position-anchor: --infotip-' . get_the_id() . ';
      top: anchor(--infotip-' . get_the_id() . ' -15%);
      left: anchor(--infotip-' . get_the_id() . ' 100%);
    }
  }
</style>'

আমরা প্রযুক্তিগতভাবে সম্পন্ন করেছি!

আমার নির্দিষ্ট ব্যবহারের ক্ষেত্রে আমি কেবল যা করতে পেরেছিলাম তা হ’ল শর্তসাপেক্ষ বিবৃতি যুক্ত করা হয়েছিল যা কেবলমাত্র সিএমএসে একটি “পরীক্ষামূলক বৈশিষ্ট্য” চিহ্নিত করা হলে টুলটিপটি আউটপুট করে। তবে আপনি ধারণা পান।

এর চেয়ে ভাল উপায় নেই?!

হ্যাঁ! তবে এখনও বেশ না। ব্রামাস একটি নতুন প্রস্তাব করলেন ident() ফাংশন এটি, যখন এটি অফিসিয়াল হয়ে যায়, তখন এমন একটি সিরিজ ড্যাশড আইডেন্ট তৈরি করবে যা আমি যে নোঙ্গরগুলির সাথে কাজ করছি তার মতো জিনিসগুলির নাম ব্যবহার করতে এবং সেই নামগুলি একে অপরের সাথে সংঘর্ষ থেকে বিরত রাখতে বাধা দেয়।

<div class="group-list">
  <details id="item-1" class="group-item">...</details>
  <details id="item-2" class="group-item">...</details>
  <details id="item-3" class="group-item">...</details>
  <details id="item-4" class="group-item">...</details>
  <details id="item-5" class="group-item">...</details>
  <!-- etc. -->
</div>

/* Hypothetical example — does not work! */
.group-item { 
  anchor-name: ident("--infotip-" attr(id) "-anchor");
  /* --infotip-item-1-anchor, --infotip-item-2-anchor, etc. */
}

আসুন শীঘ্রই স্পেসিফিকেশনগুলি আঘাত করার জন্য আমাদের আঙ্গুলগুলি অতিক্রম করে রাখি!