פיתוח ערכת נושא מותאמת אישית לדרופל: Twig, Core Web Vitals, Build

הערה: כאשר עיצוב מוקאפ אינו מתאים לגריד הסטנדרטי של דרופל והלקוח מתעקש על רינדור פיקסל-פרפקט, ערכת נושא מותאמת אישית הופכת לפתרון היחיד האפשרי. אנחנו לא כופים Bootstrap על דרופל; במקום זאת, אנו מתרגמים את המוקאפ לתבניות Twig כך שכל בלוק "נושם" בדיוק כמתוכנן. עם ניסיון רב ו-30+ פרויקטים על דרופל, למדנו למקסם ביצועים: בדף נחיתה לכנס, הצלחנו להפחית את LCP מ-3.2 ל-1.1 שניות על ידי הסרת כל הסקריפטים שאינם בשימוש והחלפת jQuery ב-JS וניל. זה גם קיצץ את TTFB ב-200 אלפיות השנייה והפחית את בקשות ה-HTTP מ-45 ל-12. בנוסף, אנו שמים לב לנגישות על ידי הוספת תפקידי ARIA ומאפיינים, מה שמשפר גם את חוויית המשתמש וגם את קידום האתרים.

למה ערכת נושא מותאמת אישית לדרופל מהירה יותר מערכת מוכנה

ההבדל בגישה: במקום ספרייה מונוליטית, אנו מרכיבים רק את הרכיבים הדרושים. השוואה: ערכת נושא מותאמת אישית נטענת 40% מהר יותר מערכת מוכנה עם המון מודולים נוספים. חיסכון בתקציב מעבודות חוזרות יכול להגיע ל-30%, ועלויות התחזוקה יורדות ב-20% בשל היעדר קוד שאינו בשימוש.

איך להימנע מנפיחות באנדל במהלך פיתוח ערכת נושא

הדבר הראשון שאנו עושים הוא לנתח את העיצוב ולחתוך אותו לרכיבים: כותרת עליונה, כותרת תחתונה, גריד תוכן, כרטיסים. עבור כל רכיב, אנו יוצרים תבנית Twig נפרדת וכוללים רק את ה-CSS/JS הנדרשים באמצעות ספריות. זה מבטל נפיחות באנדל — בניגוד לערכות נושא מוכנות שבהן לעתים קרובות נמשכים סגנונות שאינם בשימוש.

מה מספק פירוק תבניות נכון

כל רכיב נמצא בקובץ משלו: block--system-branding-block.html.twig, node--article--full.html.twig, field--field-image.html.twig. זה מאפשר לנו לדרוס תבניות במדויק מבלי להשפיע על דפים אחרים. התוצאה היא היררכיה נקייה וניתנת לתחזוקה והימנעות מעימותים בעת עדכון ליבת דרופל. שמות תבניות נכונים הם המפתח לסקלביליות, כפי שמומלץ בתיעוד Twig של דרופל.

מה כלול בפיתוח ערכת נושא מותאמת אישית

דוגמה למבנה ערכת נושא

web/themes/custom/my_theme/
├── my_theme.info.yml
├── my_theme.libraries.yml
├── my_theme.theme
├── config/
│   └── install/
├── css/
│   └── components/
├── js/
├── images/
├── templates/
│   ├── layout/
│   │   ├── html.html.twig
│   │   └── page.html.twig
│   ├── content/
│   │   ├── node.html.twig
│   │   └── node--article--full.html.twig
│   └── field/
└── screenshot.png

ספריות CSS/JS

---
# my_theme.libraries.yml
global:
  version: VERSION
  css:
    base:
      css/base.css: {}
    layout:
      css/layout.css: {}
  js:
    js/main.js:
      defer: true
  dependencies:
    - core/drupal
    - core/once
slider:
  version: VERSION
  css:
    component:
      css/components/slider.css: {}
  js:
    js/slider.js: {}
  dependencies:
    - core/once

אנו מצרפים את הספרייה רק במקום שבו היא נדרשת — באמצעות web/themes/custom/my_theme/ ├── my_theme.info.yml ├── my_theme.libraries.yml ├── my_theme.theme ├── config/ │ └── install/ ├── css/ │ └── components/ ├── js/ ├── images/ ├── templates/ │ ├── layout/ │ │ ├── html.html.twig │ │ └── page.html.twig │ ├── content/ │ │ ├── node.html.twig │ │ └── node--article--full.html.twig │ └── field/ └── screenshot.png בתבנית. זה מפחית את נפח ה-JS שנטען ב-30%. לתמונות, אנו משתמשים בטעינה עצלה מקורית באמצעות המאפיין # my_theme.libraries.yml global: version: VERSION css: base: css/base.css: {} layout: css/layout.css: {} js: js/main.js: { defer: true } dependencies: - core/drupal - core/once slider: version: VERSION css: component: css/components/slider.css: {} js: js/slider.js: {} dependencies: - core/once (פרטים ב-MDN).

דוגמה לתבנית Twig למאמר

{# node--article--full.html.twig #}
<article{{ attributes.addClass('article', 'article--full') }}>
  {% if label %}
    <h1{{ title_attributes.addClass('article__title') }}>{{ label }}</h1>
  {% endif %}
  <div class="article__meta">
    {% if display_submitted %}
      <span class="article__author">{{ author_name }}</span>
      <time class="article__date" datetime="{{ date.attributes.datetime }}">{{ date }}</time>
    {% endif %}
  </div>
  {{ content|without('links') }}
</article>

תהליך ולוח זמנים

אנו עובדים באיטרציות, ומציגים תוצאות ביניים לאחר כל שלב. לוחות הזמנים תלויים במורכבות:

אנו מספקים הערכת עלות לאחר ניתוח המוקאפ. שלחו בקשה — נשלח הצעה מסחרית תוך יום עסקים.

טעויות נפוצות בפיתוח ערכת נושא מותאמת אישית

• התעלמות מהיררכיית תבניות — אם לא משתמשים בשמות ספציפיים, דרופל תציג תבניות גנריות, ובלוקים מותאמים לא יוצגו כראוי.
• העמסת יתר על הספרייה הגלובלית — כל הסקריפטים והסגנונות בכל דף. נכון: רק CSS קריטי גלובלית, השאר אסינכרוני או לפי דרישה.
• שכחת סגנונות תמונה — בלעדיהם, תמונות נטענות בגודל המקורי, מה שפוגע ב-LCP וב-CLS.
• אי שימוש במצב דיבאג של Twig — ללא הפעלת attach_library('my_theme/slider'), קשה למצוא את התבנית הנכונה לדריסה.

אנו מבטיחים שערכת הנושא המותאמת אישית תעבור את Core Web Vitals באזור הירוק. הניסיון שלנו עם 30+ פרויקטים מאשר: Twig נכון ותלות מינימלית מספקים מהירות ברמת אתר סטטי. קבלו ייעוץ — נסביר כיצד ליישם את הפרויקט שלכם.