- إظهار تاريخ ووقت التحديث على الإدخالات بجوار تاريخ النشر
- روابط متحركة مسطرة تحتها خط
- إزالة الفواصل بين العلامات
- إضافة لون الخلفية إلى الفئات والعلامات
- اعرض لون خلفية مختلف لكل فئة أو تسمية مختلفة
- إظهار السنوات فقط في أداة الأرشيف
- شريط تقدم القراءة البسيط بدون مكون إضافي
- تغيير الشعار على صفحة معينة فقط
- إخفاء الشريط الجانبي في إصدار الهاتف المحمول
- إظهار الصور المميزة في الحلقة يمينًا ويسارًا
- تخصيص زر "قراءة المزيد"
- نمط ترقيم صفحات الدخول
- توسيط مربع محرك البحث
- حجم نص الفئات والتسميات
فيما يلي بعض الأجزاء المفيدة من التعليمات البرمجية. إنها دوال وفلاتر و CSS التي أستخدمها أو احتجتها في مرحلة ما لقالب GeneratePress، الذي أستخدمه وأوصي به.
وقد جاء بعضها من منتدى الدعم الخاص بها، وهو مصدر لا ينضب من الحلول، ومن وثائقها والبعض الآخر من استفسارات الدعم وعمليات البحث.
إظهار تاريخ ووقت التحديث على الإدخالات بجوار تاريخ النشر
يعرض هذا الفلتر تاريخ ووقت التحديث على إدخالات GeneratePress. يعتمد ذلك على كيفية تكوينك للتاريخ في الإعدادات/عامة/تنسيق التاريخ/مخصص. في الحالة المستخدمة هنا يبدو كالتالي: د/م/ي: H:i
/* Fecha y Hora de PUBLICADO Y ACTUALIZADO EN META POST */
add_filter( 'generate_post_date_output', function( $output, $time_string ) {
$time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';
if ( get_the_date() !== get_the_modified_date() ) {
$time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">Publicado: %2$s</time> | <time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">Actualizado: %4$s | </time>';
}
$time_string = sprintf( $time_string,
esc_attr( get_the_date( 'c' ) ),
esc_html( get_the_date() ),
esc_attr( get_the_modified_date( 'c' ) ),
esc_html( get_the_modified_date() )
);
return sprintf( '<span class="posted-on">%s</span> ',
$time_string
);
}, 10, 2 );
روابط متحركة مسطرة تحتها خط
CSS لإنشاء تأثير متحرك لروابطك النصية مثل الذي تراه في الصورة المتحركة أدناه:
/* Subrayado de enlace animado con color de fondo */
p a{
font-weight: bold;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fdede7), to(#fdede7));
background-image: linear-gradient(to bottom, #fdede7 0%, #fdede7 100%);
background-repeat: no-repeat;
background-size: 100% 00%;
background-position: 0 111%;
-webkit-transition: background-size .25s ease-in;
transition: background-size .25s ease-in;
padding-left: 2px;
padding-right: 2px;
border-bottom: 2px solid #ec4911;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
p a:hover{
background-size: 100% 100%;
}
في صورة الخلفية والحدود السفلية يمكنك تغيير الألوان.
سيتعين عليك مراقبة السلوك في الفقرات والأزرار والعناصر الأخرى التي تتضمن روابط من أجل تعديلها بحيث لا يكون هناك شيء في غير محله.
الكود من تأليف كايل فان ديوسن الذي يمتلك، بالإضافة إلى شريط المسؤول، مدونة مثيرة للاهتمام تسمى Generatetweaks حيث ينشر أجزاء مختلفة غريبة من الأكواد والقوالب لـ GeneratePress و GenerateBloks، مثل هذا الوضع المظلم لـ GP و GB.
إزالة الفواصل بين العلامات
هذا كل ما في الأمر.
إذا كنت لا تريد عرض الفواصل بين العلامات، فلن يتم عرضها باستخدام هذا الفلتر.
من المفيد جداً إذا قررت تلوين التسميات أو استخدام رمز آخر للفصل بينها.
/* QUITA LAS COMAS EN LAS ETIQUETAS */
add_filter('generate_term_separator', function($separator, $tags){
return " ";
}, 10, 2);
إضافة لون الخلفية إلى الفئات والعلامات
باستخدام CSS هذا، يمكنك إضافة أي لون تريده إلى جميع الفئات و/أو جميع الوسوم.
سيعرضها CSS في المثال هكذا:
/* Categorías y colores */
.entry-meta .cat-links a {
padding: 3px 5px;
font-size: 17px;
background-color: #B50000;
border-radius: 5px;
color: #FFF
}
/* Etiquetas y colores */
.entry-meta .tags-links a {
padding: 3px 5px;
font-size: 17px;
background-color: #006a05;
border-radius: 5px;
color: #FFFF
}
/* Espacio entre línea de categorías y etiquetas */
.cat-links {
margin-bottom: 10px;
}
اعرض لون خلفية مختلف لكل فئة أو تسمية مختلفة
باستخدام CSS هذا، ستتمكن من إعطاء لون مختلف لكل فئة. للقيام بذلك سيكون عليك كتابة قطعة مثل هذه لكل فئة أو وسم تريد تعديله. في المثال الأول تُستخدم الفئة"ووردبريس" بخلفية زرقاء ونص أبيض. في المثال الثاني تُستخدم الوسم"مدونة" بخلفية برتقالية ونص أبيض.
وهذه هي النتيجة..:
/* Mostrar un color diferente para cada categoría o etiqueta */
#main span.cat-links a[href*="wordpress"] {
background-color: #005ca5;
color: white;
}
#main span.tags-links a[href*="blog"] {
background-color: #d47e00;
color: white;
}
إظهار السنوات فقط في أداة الأرشيف
ستعمل هذه الوظيفة على جعل القائمة المنسدلة لأداة الأرشيف تعرض السنوات فقط بدلاً من الأشهر. تعمل مع أي قالب، لأنها تعمل على أداة ووردبريس الأصلية. مفيدة إذا كانت مدونتك قديمة جدًا وكانت القائمة المنسدلة للأشهر طويلة جدًا بالفعل. في المثال يظهر مع عدد المقالات المنشورة.
/* MOSTRAR SOLO AÑOS EN ARCHIVO WIDGET */
function my_limit_archives( $args ) {
$args['type'] = 'yearly';
return $args;
}
add_filter( 'widget_archives_args', 'my_limit_archives' );
add_filter( 'widget_archives_dropdown_args', 'my_limit_archives' );
شريط تقدم القراءة البسيط بدون مكون إضافي
هناك العديد من الإضافات لإضافة شريط تقدم القراءة في ووردبريس وكذلك الإضافات الخاصة بـ Elementor، ولكن مع القليل من التعليمات البرمجية ومرشح عناصر GeneratePress يمكن القيام بذلك بسهولة لجعلها أكثر خفة. هذا الكود من تصميم سومناث ساهو.
*فيهذا المثال يجب عليك استخدام الإصدار المميز منGeneratePress.
ننشئ أولًا مرشحًا مع العناصر باستخدام هذا الرمز.
<div class="progress-container">
<div class="progress-bar" id="myProgressBar"></div>
</div>
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myProgressBar").style.width = scrolled + "%";
}
</script>
نضبطه على الموضع wp_head ونعرضه ضمن الإدخالات / جميع الإدخالات.
/*** Barra de progreso de lectura - Progress bar **/
.progress-container {
width: 100%;
height: 8px;
background: #ccc; /** Change Progress bar background color **/
}
.progress-bar {
height: 8px;
background: #a70404; /** Change Progress bar color **/
width: 0%;
position:fixed;
z-index:999;
}
وهذه هي طريقة عرض هذا الرمز بعد تغيير اللون إلى اللون الأخضر.
سيظهر شريط التقدم في الجزء العلوي من الشاشة، ويرافقك أثناء التمرير لأسفل ويتناقص كلما قمت بالتمرير لأعلى.
تغيير الشعار على صفحة معينة فقط
احتجت هذا مرة واحدة ووجدته مرة واحدة على موقع ديفيد لاناو.
يعرض الفلتر شعاراً مختلفاً فقط على الصفحة التي تحددها.
لقد استخدمته لوضع شعار مختلف على صفحة فئة تجمع محتوى لموضوع معين.
add_filter( 'generate_logo','tu_custom_about_logo' );
function tu_custom_about_logo( $logo )
{
// Si estamos en la página servicios, vamos a poner nuestro logo personalizado para esta página
if ( is_page( 'servicios' ) )
return 'PON LA URL DEL LOGO AQUÍ';
// Y SI NO, PON EL LOGO GENERAL
return $logo;
}
إخفاء الشريط الجانبي في إصدار الهاتف المحمول
إذا كنتَ أحد أولئك الذين لا يزالون يستخدمون الشريط الجانبي واستغنيتَ عن صفحات AMP، لذا فأنت تستخدم إصدار الهاتف المحمول الأصلي من GeneratePress مع الشريط الجانبي، باستخدام CSS هذا، يمكنك إخفاؤه لإصدار الهاتف المحمول فقط.
في هذه الحالة يمكنك إضافته إلى ورقة الأنماط في قالبك الفرعي أو من CSS مخصص/إضافي.
إخفاء الشريط الجانبي الأيمن
@media(max-width: 768px) {
#right-sidebar {
display: none;
}
}
إخفاء الشريط الجانبي الأيسر
@media(max-width: 768px) {
#left-sidebar {
display: none;
}
}
إخفاء كلاهما
إخفاء الشريطين الجانبيين.
@media(max-width: 768px) {
#right-sidebar, #left-sidebar {
display: none;
}
}
إظهار الصور المميزة في الحلقة يمينًا ويسارًا
إذا كنت تستخدم قالب GeneratePress تقليدي مثل Marketer أو ما شابه ذلك، باستخدام هذا الرمز يمكنك عرض الصورة المميزة بالتناوب إلى اليسار أو اليمين في الحلقة.
.post-image-aligned-left .type-post:nth-child(even) .inside-article .post-image {
margin-left: 2em;
float: right;
text-align: right;
}
لقد وجدت هذا الرمز على موقع aquigeneratepress.com حيث يمكنك العثور على حيل أخرى مفيدة. وإليك النتيجة:
تخصيص زر "قراءة المزيد"
كما هو مذكور أعلاه، هذا CSS لزر "قراءة المزيد". وهو الذي أستخدمه هنا وأضعه على اليمين أسفل المقتطف في الصفحة الأولى.
a.read-more {
display: inline-block;
color: white !important;
padding: 10px;
border-radius: 10px;
float:right
}
نمط ترقيم صفحات الدخول
مرشح وقليل من CSS للحصول على هذا المظهر لترقيم الصفحات في الصفحة الأولى. من هنا، يمكنك تعديلها حسب رغبتك.
أول شيء يجب القيام به هو استبدال الكلمتين السابق والتالي بالرمزين <<<و >> بهذا الفلتر الذي يمكنك إضافته في function.php لقالبك الفرعي أو باستخدام Code Snippet.
/* Cambia ANTERIOR y SIGUIENTE por << y >> en navegación */
add_filter( 'generate_previous_link_text', function() {
return '<<';
} );
add_filter( 'generate_next_link_text', function() {
return '>>';
} );
ثم تضاف CSS بنفس الطريقة التي تمت إضافتها في الحالات السابقة
/* Paginacion entradas */
#nav-below {
text-align: center;
}
.paging-navigation .nav-links>* {
font-size: 20px;
padding: 7px 10px;
background-color: #870000;
color: white;
border-radius: 4px;
}
.paging-navigation .nav-links span.page-numbers.current {
background: red;
color: #ffffff;
}
a.next.page-numbers > span {
display: none;
}
توسيط مربع محرك البحث
محرك بحث GeneratePress الأصلي ضعيف بعض الشيء، وهنا القليل من CSS لتكييفه مع الأجهزة وتوسيطه.
/* Centrar caja de búsqueda en menú principal */
form.search-form.navigation-search.nav-search-active {
width:50%;
left:50%;
transform:translateX(-50%)
}
/* Responsive caja de búsqueda en móvil - tablet y PC */
@media (max-width: 768px) {
/* CSS in here for mobile only */
form.search-form.navigation-search.nav-search-active {
width:100%;
left:50%;
transform:translateX(-50%)
}
}
@media (min-width: 769px) and (max-width: 1024px) {
/* CSS in here for tablet only */
form.search-form.navigation-search.nav-search-active {
width:100%;
left:50%;
transform:translateX(-50%)
}
.inside-navigation {
align-items: flex-end !important;
flex-direction:column-reverse;
}
}
@media (min-width: 1025px) {
/* CSS in here for desktop only */
form.search-form.navigation-search.nav-search-active {
width:40%;
left:50%;
transform:translateX(-50%)
}
}
حجم نص الفئات والتسميات
إذا قمت بإظهار الفئات والعلامات تحت المنشورات، بإضافة CSS هذا يمكنك تغيير الحجم والاستمرار في إضافة CSS لمنحهم النمط الذي تريده. يمكن العثور على جميع الفئات لتعديلها في الوثائق أو في CSS نفسها، ولكن إذا كنت لا تريد تعقيد الأمر، وتريد فقط تغيير الحجم هنا أتركه.
.entry-meta .cat-links a {
padding: 3px 5px;
font-size: 20px;
}
.entry-meta .tags-links a {
padding: 3px 1px;
font-size: 20px;
}