בילית שבועות בהגדרת ערכת נושא מוכנה של Concrete CMS, ובכל זאת היא נטענת ב-8 שניות ואינה תואמת את העיצוב שלך. הפתרון הוא ערכת נושא מותאמת אישית הבנויה לפי העיצוב שלך. אנו יוצרים ערכות נושא שמשיגות ציון 90+ ב-Lighthouse, קלות לתחזוקה ומתרחבות. למעלה מ-50 פרויקטים מוצלחים מאשרים: פיתוח מותאם אישית משתלם במהירות ובגמישות. הבעיות האופייניות בערכות נושא מוכנות הן CSS מנופח (עד 70% סגנונות שאינם בשימוש), ספריות JavaScript מיותרות וחוסר רספונסיביות לעיצובים מורכבים – כל אלה פוגעים ב-Core Web Vitals ובשיעורי ההמרה.
למה ערכת נושא מותאמת אישית עדיפה על מוכנה
ערכות נושא מוכנות מגיעות לרוב עם הרבה קוד מת. לדוגמה, תבנית פופולרית עשויה לכלול חמישה סגנונות גלריה שונים כאשר רק אחד נמצא בשימוש. זה מגדיל את ה-LCP ל-4+ שניות ואת ה-CLS ל-0.15. ערכת נושא מותאמת אישית שנכתבה לפי העיצוב המדויק שלך מונעת בעיות אלה. אנו מיישמים tree-shaking ל-CSS, ממזערים JS ומטמיעים CSS קריטי. לאחר פריסת ערכת נושא מותאמת אישית, אנו רואים בדרך כלל שיפור של 40%–60% ב-LCP, ירידה של CLS ל-0.05 ושל INP ל-150 אלפיות השנייה. לעומת זאת, ערכת נושא מוכנה שומרת לעתים קרובות על LCP מעל 4 שניות.
לפי התיעוד הרשמי של Concrete CMS, ערכת נושא מותאמת אישית יכולה להפחית את כמות ה-CSS המועבר ב-60-80% על ידי הסרת סגנונות שאינם בשימוש.
יישום טכני של ערכת נושא מותאמת אישית
מבנה חבילת ערכת נושא
חבילה מכילה את כל מה שצריך: מבנה קבצים משלה, בקר ונכסים. כאשר Concrete CMS מתעדכן, ערכת הנושא נשארת תואמת – פשוט התקן מחדש את החבילה. האריזה מקלה על הוספת בלוקים ומאפיינים מותאמים אישית מבלי לגעת בליבה.
דוגמה למבנה חבילת ערכת נושא
packages/my-theme/
controller.php # контроллер пакета
themes/
my-theme/
page_types/ # шаблоны типов страниц
home.php
default.php
service-detail.php
elements/ # части шаблона (header, footer, nav)
header.php
footer.php
navigation.php
blocks/ # переопределения шаблонов блоков
content/
templates/
two-column.php
css/
main.css
js/
app.js
thumbnail.png # превью темы (360×270)
description.txt
page.php # базовый шаблон (fallback)
view.php # главный layout (deprecated, но поддерживается)תבנית בסיס page.php
packages/my-theme/ controller.php # контроллер пакета themes/ my-theme/ page_types/ # шаблоны типов страниц home.php default.php service-detail.php elements/ # части шаблона (header, footer, nav) header.php footer.php navigation.php blocks/ # переопределения шаблонов блоков content/ templates/ two-column.php css/ main.css js/ app.js thumbnail.png # превью темы (360×270) description.txt page.php # базовый шаблон (fallback) view.php # главный layout (deprecated, но поддерживается) הוא הפריסה הראשית שלתוכה מוכנס תוכן סוג העמוד. היא טוענת CSS/JS ואלמנטים משותפים.
<?php // packages/my-theme/themes/my-theme/page.php
defined('C5_EXECUTE') or die('Access Denied.');
?>
<!DOCTYPE html>
<html lang="<?= Localization::activeLocale() ?>">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?= $c->getCollectionName() ?> | <?= $site->getName() ?></title>
<?php $html = Loader::helper('html'); echo $html->css('main.css', 'my-theme'); ?>
<?php View::element('header_required', ['disableTrackingCode' => false]) ?>
</head>
<body class="<?= $c->getPageWrapperClass() ?>">
<?php View::element('header', [], 'my-theme') ?>
<main id="main-content">
<?php echo $innerContent ?>
</main>
<?php View::element('footer', [], 'my-theme') ?>
<?php echo $html->javascript('app.js', 'my-theme') ?>
<?php View::element('footer_required') ?>
</body>
</html>המשתנה page.php מחזיק את הפלט של תבנית סוג העמוד. זה מפריד בין מבנה לתוכן.
תבנית סוג עמוד
עבור כל סוג עמוד (למשל, "שירות", "בית"), אנו יוצרים קובץ נפרד. קובץ זה יכול להצהיר על Areas מותאמים אישית ולהציג מאפייני עמוד.
<?php // page_types/service-detail.php
defined('C5_EXECUTE') or die('Access Denied.');
$a_hero = new Area('Hero');
$a_content = new Area('Main Content');
$a_related = new Area('Related Services');
$heroImage = $c->getAttribute('hero_image');
$intro = $c->getAttribute('intro_text');
?>
<section class="hero <?= $heroImage ? 'hero--has-image' : '' ?>">
<?php if ($heroImage): ?>
<img src="<?= $heroImage->getURL() ?>" alt="<?= h($c->getCollectionName()) ?>">
<?php endif; ?>
<div class="hero__content">
<h1><?= h($c->getCollectionName()) ?></h1>
<?php if ($intro): ?><p><?= h($intro) ?></p><?php endif; ?>
</div>
</section>
<div class="container layout-sidebar">
<article class="content">
<?php $a_content->display($c) ?>
</article>
<aside class="sidebar">
<?php $a_related->display($c) ?>
</aside>
</div>אלמנט ניווט עם מצב פעיל
הניווט הוא אחד האלמנטים החשובים ביותר. אנו קובעים את הפריט הפעיל על סמך מזהה העמוד הנוכחי ועמודי האב שלו.
<?php // elements/navigation.php
defined('C5_EXECUTE') or die('Access Denied.');
$navHelper = Loader::helper('navigation');
$pages = Page::getByPath('/')->getCollectionChildren();
?>
<nav class="main-nav">
<ul>
<?php foreach ($pages as $navPage): ?>
<?php $isActive = ($c->getCollectionID() == $navPage->getCollectionID() || $navHelper->isParentPage($c, $navPage)); ?>
<li class="<?= $isActive ? 'active' : '' ?>">
<a href="<?= $navPage->getCollectionLink() ?>">
<?= h($navPage->getCollectionName()) ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</nav>דריסת תבנית בלוק
Concrete CMS מאפשרת ליצור תבנית חלופית לכל בלוק מובנה. עורכים רואים אותה בתפריט נפתח בעת בחירת הבלוק.
<?php // packages/my-theme/themes/my-theme/blocks/content/templates/two-column.php
defined('C5_EXECUTE') or die('Access Denied.');
?>
<div class="content-block two-col">
<div class="col"><?= $content ?></div>
</div>השוואה בין ערכת נושא מותאמת אישית למוכנה
| פרמטר | ערכת נושא מותאמת אישית | ערכת נושא מוכנה |
|---|---|---|
| ביצועים | ציון 90+ ב-Lighthouse | לעתים קרובות <70 עקב נפחיות |
| גמישות | כל סוגי עמודים ובלוקים | מוגבלת על ידי התבנית |
| תחזוקה | שליטה מלאה, עדכונים קלים | תלויה במפתח הערכת הנושא |
| עלות ארוכת טווח | משתלמת דרך מהירות ותחזוקה נמוכה | עשויה לדרוש החלפה ככל שהאתר גדל |
| שיפור LCP | מהיר פי 2 מערכת מוכנה | קו בסיס |
| עלות אופיינית (בסיסית) | $2,500 – $5,000 | $50–$200 אך עם עלויות נסתרות |
מה כלול בפיתוח
- ניתוח מוקאפים ואבות טיפוס
- פיתוח מבנה ערכת הנושא (חבילה או סטנדרטית)
- יצירת סוגי עמודים ואזורים
- תבניות בלוקים מותאמות אישית (במידת הצורך)
- פיתוח רספונסיבי (Mobile First)
- הקמת צינור נכסים (Vite/Webpack)
- אינטגרציה עם מאפייני עמוד
- תיעוד והדרכת עורכים
- שבועיים תמיכה טכנית לאחר המסירה
כיצד לייעל את Core Web Vitals בערכת נושא
אנו משתמשים ב-Vite או Webpack לבניית CSS/JS. הקבצים הבנויים נכנסים ל-<?php // packages/my-theme/themes/my-theme/page.php defined('C5_EXECUTE') or die('Access Denied.'); ?> <!DOCTYPE html> <html lang="<?= Localization::activeLocale() ?>"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title><?= $c->getCollectionName() ?> | <?= $site->getName() ?></title> <?php $html = Loader::helper('html'); echo $html->css('main.css', 'my-theme'); ?> <?php View::element('header_required', ['disableTrackingCode' => false]) ?> </head> <body class="<?= $c->getPageWrapperClass() ?>"> <?php View::element('header', [], 'my-theme') ?> <main id="main-content"> <?php echo $innerContent ?> </main> <?php View::element('footer', [], 'my-theme') ?> <?php echo $html->javascript('app.js', 'my-theme') ?> <?php View::element('footer_required') ?> </body> </html> ול-$innerContent. ב-<?php // page_types/service-detail.php defined('C5_EXECUTE') or die('Access Denied.'); $a_hero = new Area('Hero'); $a_content = new Area('Main Content'); $a_related = new Area('Related Services'); $heroImage = $c->getAttribute('hero_image'); $intro = $c->getAttribute('intro_text'); ?> <section class="hero <?= $heroImage ? 'hero--has-image' : '' ?>"> <?php if ($heroImage): ?> <img src="<?= $heroImage->getURL() ?>" alt="<?= h($c->getCollectionName()) ?>"> <?php endif; ?> <div class="hero__content"> <h1><?= h($c->getCollectionName()) ?></h1> <?php if ($intro): ?><p><?= h($intro) ?></p><?php endif; ?> </div> </section> <div class="container layout-sidebar"> <article class="content"> <?php $a_content->display($c) ?> </article> <aside class="sidebar"> <?php $a_related->display($c) ?> </aside> </div> , אנו טוענים אותם דרך <?php // elements/navigation.php defined('C5_EXECUTE') or die('Access Denied.'); $navHelper = Loader::helper('navigation'); $pages = Page::getByPath('/')->getCollectionChildren(); ?> <nav class="main-nav"> <ul> <?php foreach ($pages as $navPage): ?> <?php $isActive = ($c->getCollectionID() == $navPage->getCollectionID() || $navHelper->isParentPage($c, $navPage)); ?> <li class="<?= $isActive ? 'active' : '' ?>"> <a href="<?= $navPage->getCollectionLink() ?>"> <?= h($navPage->getCollectionName()) ?> </a> </li> <?php endforeach; ?> </ul> </nav> ו-<?php // packages/my-theme/themes/my-theme/blocks/content/templates/two-column.php defined('C5_EXECUTE') or die('Access Denied.'); ?> <div class="content-block two-col"> <div class="col"><?= $content ?></div> </div> – Concrete CMS מוסיפה אוטומטית hash גרסה. זה מבטיח ששינויי נכסים מיושמים מיד ללא שמירת גרסאות ישנות במטמון. אנו מטמיעים בנוסף CSS קריטי לצביעה ראשונית מהירה. תוצאות: LCP < 2s, CLS < 0.05, INP < 150 אלפיות השנייה. זה LCP מהיר פי 2 בהשוואה לערכות נושא מוכנות.
ערכת נושא מותאמת אישית מספקת LCP מהיר פי שניים מערכת מוכנה. שלבים:
- ניתוח פריסה: זיהוי נתיב רינדור קריטי ומשאבים חוסמים.
- בניית Vite: tree-shake ל-CSS, מזעור JS, רענון אוטומטי במהלך הפיתוח.
- הטמעת CSS קריטי: שילוב סגנונות מעל הקיפול ב-
themes/my-theme/css/. - אופטימיזציית תמונות: WEBP, טעינה עצלה, srcset רספונסיבי.
- בדיקות: Lighthouse, WebPageTest, מכשירים אמיתיים.
לוחות זמנים ואחריות
| עבודה | לוח זמנים |
|---|---|
| ערכת נושא בסיסית ממוקאפ (5–7 סוגי עמודים) | 2–4 שבועות |
| ערכת נושא רספונסיבית עם אלמנטים מותאמים אישית | 3–6 שבועות |
| ערכת נושא מלאה עם חבילה, בלוקים ומאפיינים | 5–10 שבועות |
אנו מבטיחים התאמה מושלמת לפיקסל לעיצוב שלך, רספונסיביות נכונה ואפס שגיאות. לאחר המסירה, אנו מספקים שבועיים של תמיכה חינם. עם ניסיון של 8+ שנים ב-Concrete CMS ו-50+ פרויקטים מוצלחים, צור קשר להערכת פרויקט – ננתח את המוקאפים שלך ונציע את הפתרון הטוב ביותר. הזמינו פיתוח ערכת נושא מותאמת אישית ל-Concrete CMS וקבלו ייעוץ ארכיטקטוני.
למידע נוסף על יכולות ה-CMS, בקרו בתיעוד הרשמי של Concrete CMS.