نحوه افزودن کلاسهای مرورگر کاربر و سیستم عامل در کلاس بدنه وردپرس

هنگام ایجاد تم های وردپرس ، گاهی اوقات ممکن است برای تغییر جنبه های خاصی از طرح خود با استفاده از CSS یا jQuery . وردپرس قادر است این کار را برای شما انجام دهد. در این مقاله ، ما به شما نحوه افزودن کلاسهای مرورگر و سیستم عامل کاربر را به شما نشان خواهیم داد کلاس بدن WordPress .

Detecting user platform and browser in WordPress

به طور پیش فرض وردپرس کلاسهای CSS را برای بخشهای مختلف وب سایت شما ایجاد می کند. این همچنین فیلترها را فراهم می کند ، بنابراین توسعه دهندگان قالب و پلاگین می توانند کلاس های خود را حفظ کنند. شما برای افزودن اطلاعات مرورگر و سیستم عامل به عنوان کلاس CSS از فیلتر body_class استفاده خواهید کرد.

اولین کاری که باید انجام دهید این است که کد زیر را در موضوع خود اضافه کنید پرونده توابع.php .

        تابع mv_browser_body_class ($ Class) {
                جهانی $ is_lynx ، $ is_gecko ، $ is_IE ، $ is_opera ، $ is_NS4 ، $ is_safari ، $ is_chrome ، $ is_iphone ؛
                if ($ is_lynx) $ class [] = 'سیاه گوش'؛
                elseif ($ is_gecko) $ class [] = 'gecko'؛
                elseif ($ is_opera) $ class [] = 'اپرا'؛
                elseif ($ is_NS4) $ class [] = 'ns4'؛
                elseif ($ is_safari) $ class [] = 'سافاری'؛
                elseif ($ is_chrome) $ class [] = 'chrome'؛
                چیز دیگری ($ is_IE) {
                        $ class [] = 'یعنی'؛
                        if (preg_match ('/ MSIE ([0-9] +) ([a-zA-Z0-9.] +) /'، $ _SERVER ['HTTP_USER_AGENT']، $ browser_version))
                        $ class [] = 'یعنی'. $ browser_version [1]؛
                } else $ Class [] = 'ناشناخته'؛
                if ($ is_iphone) $ class [] = 'آیفون'؛
                if (stristr ($ _SERVER ['HTTP_USER_AGENT'] ، "mac"))) {
                         $ class [] = 'osx'؛
                   } elseif (stristr ($ _SERVER ['HTTP_USER_AGENT'] ، "linux"))) {
                         $ class [] = 'linux'؛
                   } elseif (stristr ($ _SERVER ['HTTP_USER_AGENT'] ، "windows"))) {
                         $ class [] = 'windows'؛
                   }
                کلاسهای $ را برگردانید
        }
        add_filter ('body_class'، 'mv_browser_body_class')؛

قسمت اول این اسکریپت مرورگر کاربر را شناسایی کرده و آن را به $ class اضافه می کند. قسمت دوم سیستم عامل کاربر را شناسایی کرده و آن را به $ class نیز اضافه می کند. خط آخر برای افزودن کلاس ها از فیلتر body_class وردپرس استفاده می کند.

اکنون باید کلاس body را به برچسب HTML در پرونده header.php طرح زمینه خود اضافه کنید. خط کد موجود در پرونده الگوی خود را با این کد جایگزین کنید:

>

توجه داشته باشید اگر در حال کار با یک موضوع شروع مانند زیر خط یا کدگذاری خوب هستید چارچوب های تم مانند Genesis ، پس موضوع شما از قبل دارای عملکرد کلاس body در برچسب body خواهد بود. پس از اجرای کد ، می توانید کلاس های مرورگر و سیستم عامل را با برچسب body در منبع HTML مشاهده کنید. همچنین مشاهده خواهید کرد که کلاسهای دیگری نیز توسط وردپرس به برچسب body اضافه می شوند.

Adding browser and OS information in WordPress body class

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

اگر به تازگی شروع به ساخت قالب WordPress کرده اید ، ممکن است بخواهید نگاهی به معرفی Sass و WordPress Body Class 101 برای طراحان تم جدید. در صورت داشتن هرگونه بازخورد یا س byال ، با ارسال نظر در زیر به ما اطلاع دهید.

منبع: Justin Sternberg

منبع:
https://www.wpbeginner.com/wp-themes/how-to-add-user-browser-and-os-classes-in-wordpress-body-class/.

دیدگاهتان را بنویسید