🔶 پیش نمایش پنل کاربری ووکامرس

@TheRaymondDev

🔥 کد تابع ایجاد فهرست محتوا بدون استفاده از افزونه :

function add_table_of_contents($content) {
    if (is_singular('post') && is_main_query()) {
        $pattern = '/<h([2-6]).*?>(.*?)<\/h[2-6]>/';
        if (preg_match_all($pattern, $content, $matches, PREG_SET_ORDER)) {
            $output = '<div class="card mt-4 mb-4 rounded-5"><details class="js-list">';
            $output .= '<summary class="noscript js-noscript"><i class="fa-light fa-list-dots"></i> <h3 class="fs-5 mt-1">فهرست محتوا</h3> <span class="icon"></span></summary>';
            $output .= '<div class="content js-content"><ul class="mt-3">';
            foreach ($matches as $match) {
                $level = $match[1];
                $noscript = $match[2];
                $slug = sanitize_noscript($noscript);
                $output .= '<li class="mb-2 toc-level-' . $level . '"><a href="#' . $slug . '">' . $noscript . '</a></li>';
                $content = str_replace($match[0], '<h' . $level . ' id="' . $slug . '">' . $noscript . '</h' . $level . '>', $content);
            }
            $output .= '</ul></div>';
            $output .= '</details></div>';
            $content = $output . $content;
        }
    }
    return $content;
}

add_filter('the_content', 'add_table_of_contents');

@TheRaymondDev

🔥 استایل فهرست محتوا :

summary {
    display: block;
}
summary::-webkit-details-marker{
    display: none;
}

.p-section-faq__item:nth-of-type(n+2) {
    margin-top: 32px;
}

.noscript {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    color: #212529;
    cursor: pointer;
}
.icon {
    display: block;
    flex-shrink: 0;
    position: relative;
    width: 16px;
    transform-origin: center;
}
.icon::after {
    content: "";
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    transition: transform .3s;
    transform: translateY(-80%) rotate(45deg);
    border-right: 2px solid #212529;
    border-bottom: 2px solid #212529;
}

.is-opened .icon::after {
    transform: translateY(-25%) rotate(-135deg);
}

.content {
    overflow: hidden;
}

@TheRaymondDev

🔥 جاوا اسکریپت فهرست محتوا :

const js_list = ".js-list";
const js_noscript = ".js-noscript";
const js_content = ".js-content";

document.addEventListener("DOMContentLoaded", () => {
    setUpAccordion();
});

const setUpAccordion = () => {
    const lists = document.querySelectorAll(js_list);
    const RUNNING_VALUE = "running";
    const IS_OPENED_CLASS = "is-opened";

    lists.forEach((element) => {
        const noscript = element.querySelector(js_noscript);
        const content = element.querySelector(js_content);

        noscript.addEventListener("click", (event) => {
            event.preventDefault();
            if (element.dataset.animStatus === RUNNING_VALUE) {
                return;
            }

            if (element.open) {
                element.classList.toggle(IS_OPENED_CLASS);
                const closingAnim = content.animate(closingAnimKeyframes(content), animTiming);
                element.dataset.animStatus = RUNNING_VALUE;
                closingAnim.onfinish = () => {
                    element.removeAttribute("open");
                    element.dataset.animStatus = "";
                };
            } else {
                element.setAttribute("open", "true");
                element.classList.toggle(IS_OPENED_CLASS);
                const openingAnim = content.animate(openingAnimKeyframes(content), animTiming);
                element.dataset.animStatus = RUNNING_VALUE;
                openingAnim.onfinish = () => {
                    element.dataset.animStatus = "";
                };
            }
        });
    });
}
const animTiming = {
    duration: 200,
    easing: "ease-out"
};
const closingAnimKeyframes = (content) => [
    {
        height: content.offsetHeight + 'px',
        opacity: 1,
    }, {
        height: 0,
        opacity: 0,
    }
];

const openingAnimKeyframes = (content) => [
    {
        height: 0,
        opacity: 0,
    }, {
        height: content.offsetHeight + 'px',
        opacity: 1,
    }
];

@TheRaymondDev

🔶 پیش نمایش فهرست محتوا

@TheRaymondDev

🔶 کد استایل بلوک نمایش کدها :

pre {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    overflow: auto;
}

pre code {
    display: block;
    padding: 0;
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
}

pre code::before {
    content: attr(data-line);
    display: inline-block;
    width: 2em;
    padding-right: 1em;
    color: #777;
    text-align: right;
}

@TheRaymondDev

🔶 پس از نصب قالب راییوم در سایت
فروش این قالب آموزشی - وبلاگی ووکامرس آغاز می شود..
قیمت فروش : 250000 تومان

@TheRaymondDev

🔶 کار به جایی رسیده به خاطر بارگزاری کند قالب فونت آیکون Fontawsome رو حذف کنم و از آیکون های SVG استفاده کنم.
حجم فایل جاوا اسکریپت فونت آواسام به 15 مگ می رسه 😐

@TheRaymondDev

🔶 با کمک جناب مرادی @acc2alone مشکل فونت آیکون حل شد.

@TheRaymondDev

🔶 چند ساعت دیگه قالب جدید راییوم نصب خواهد شد 🔥

@TheRaymondDev

🔶 قالب راییوم نصب شد.

https://orchiddev.ir

@TheRaymondDev

🔶 دامنه جدید با همین قالب بالا آمد اما فونت های آن لود نمی شد.
و توی ریدایرکت کردن به دامنه اصلی مشکل داریم.
این مشکلات باید رفع بشه..

آدرس جدید : https://rayium.ir

@TheRaymondDev

🔶 باگ تایید بخش ریدایرکت کنسول گوگل

متاسفانه در بخش تغییر دامنه برای جایگزین آن بدون افت گوگل دچار باگ شده است و الان نمی تونیم چیزی رو تغییر بدیم.
باید چند روزی صبر کرد.

@TheRaymondDev

🔶 گزارش باگ به جان مولر (وکیل مدافع جستجو کنسول گوگل)

@TheRaymondDev

🔶 استایل تقویم وردپرس

.widget_calendar {float: left;}
#wp-calendar {width: 100%; }
#wp-calendar caption { text-align: right; color: #333; font-size: 12px; margin-top: 10px; margin-bottom: 15px; }
#wp-calendar thead { font-size: 10px; }
#wp-calendar thead th { padding-bottom: 10px; }
#wp-calendar tbody { color: #aaa; }
#wp-calendar tbody td { background: #f5f5f5; border: 1px solid #fff; text-align: center; padding:8px;}
#wp-calendar tbody td:hover { background: #fff; }
#wp-calendar tbody .pad { background: none; }
#wp-calendar tfoot #next { font-size: 10px; text-transform: uppercase; text-align: right; }
#wp-calendar tfoot #prev { font-size: 10px; text-transform: uppercase; padding-top: 10px; }
#calendar_wrap {
  margin-top: 20px;
}
#wp-calendar tbody td {
  border-radius: 15px;
}

@TheRaymondDev

🔶 تداخلی در بخش بارگزاری بیشتر و صفحات سایت پیش آمده است.
فعلا فروش قالب به تاخیر افتاده است.
تا زمان رفع تداخل به فروش می زاریم.

@TheRaymondDev

🔶 تداخل رفع شد . 🤗

@TheRaymondDev

🔥 فروش قالب آموزشی راییوم آغاز شد.

فروش قالب 250000 تومان با تخفیف 20 درصد

برای پیش نمایش قالب راییوم در دامنه کنونی نصب شده است.

پیوند خرید قالب :
https://orchiddev.ir/product/rayium/

@TheRaymondDev

🔶 پشتیبانی قالب 6 ماهه رایگان هست 🔥

@TheRaymondDev

🔶 احتمالا چند ماه دیگه یه سیستم گیمری 50 الی 60 میلیونی بخریم
این سیستم قدیمی که دارم دیگه جواب نمیده...
با این نرم افزارهایی که کار می کنم هی لگ می زنه مثل نرم افزار پی اچ پی استورم ...
هر چی گفت با سیستم قدیمی می تونید برنامه نویسی کنید, جدی نگیر.
الان نزدیک 13 سال با کامپیوتر قدیمی کار کردم و دیگه عمرش گذشت. این می افته توی ادارات 😂

@TheRaymondDev

🔶 به لطف بازخورد کاربران برای قالب راییوم چند تا باگ پیدا شد.
سریع رفع می کنم. 🙏

@TheRaymondDev