كيفية إضافة قوالب مخصصة وتصميم إلى تنسيقات منشورات مدونة Divi (الجزء 2 من 3)
نشرت: 2017-05-03مرحبًا بكم في اليوم 2 من 3 في سلسلتنا حول كيفية إضافة أنماط مخصصة إلى تنسيقات منشورات مدونة Divi. بشكل افتراضي ، تأتي Divi مع ستة تنسيقات لنشر المدونة: قياسي ، وفيديو ، وصوت ، واقتباس ، ومعرض ، ورابط. في هذه السلسلة ، نعلمك كيفية تخصيصها باستخدام php و css.
بالأمس ، قمت بإرشادك إلى كيفية استخدام Desktopserver لإنشاء تثبيت محلي لـ WordPress. لقد أوضحت لك أيضًا كيفية إعداد موضوع فرعي. كلاهما أساس رائع لأي مشروع تعمل عليه وهو مثالي لما سنفعله اليوم وغدًا.
سنقوم اليوم بتحرير بعض أكواد PHP داخل ملف Divi single.php من أجل الحصول على تخطيط فريد تمامًا لتنسيقات منشورات المدونة الخاصة بك. إذا لم تكن تعرف PHP بالفعل ، فلا داعي للقلق. إنه ليس كثيرًا وليس من الصعب القيام به. سوف أطلعك على الكود الذي تحتاجه بالضبط وأين تضعه.
بعد تحرير ملف single.php الخاص بنا ، سنكون أخيرًا جاهزين للجزء الأخير من سلسلتنا. غدًا هو كل شيء عن التصميم واكتشاف كيف يمكن أن تبدو تنسيقات منشورات المدونة الرائعة في مدونتك.
هيا بنا نبدأ.
ما تحتاجه لهذا البرنامج التعليمي
إليك ما ستحتاج إلى متابعته جنبًا إلى جنب مع البرنامج التعليمي اليوم:
- محرر كود مثل Atom أو Sublime أو Brackets أو Notepad + + (أيًا كان ما تفضله)
- تثبيت WordPress محلي (أحدث إصدار) باستخدام DesktopServer (ما لم يكن لديك واحد بالفعل)
- موضوع Divi Child مثبت ونشط مع ثلاثة ملفات مضافة من منشور الأمس (style.css و function.php و single.php)
تخصيص قالب Divi Single.php
إضافة قسم بطل جديد
باستخدام محرر النصوص ، افتح ملف single.php الخاص بموضوع الطفل. تأكد من نسخ كل كود single.php من السمة الرئيسية (Divi) مع ملفك.
في الجزء العلوي من الملف ، حدد موقع div المفتوح بالمعرف "main-content".
<div id=”main-content”>
ثم أدخل ما يلي أسفل div "المحتوى الرئيسي" الافتتاحي:
<?php $featured_image_src = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' ); ?>
<div class="hero-section" style="background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('<?php printf ($featured_image_src[0])?>');">
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php et_divi_post_meta(); ?>
</div>

هذا ما يفعله هذا الكود بملف single.php الخاص بك.
أولاً ، يتم تعيين قيمة لمتغير يسمى “features_image_src $” والتي “تحصل” على مصدر الصورة (وهو عنوان url للصورة) للصورة المميزة المعينة للمنشور.

الكود التالي هو مزيج من html و php يفتح div الجديد بفئة مخصصة تسمى "قسم البطل" وبعض الأنماط المضمنة لإنشاء صورتين للخلفية مكدستين فوق بعضهما البعض.

يتم تعريف الصورة الأولى على أنها تدرج خطي يعمل بمثابة تراكب داكن للصورة المميزة.
Linear-gradient (rgba(0,0,0,0.3), rgba(,0,0,0,0.3))
والصورة الثانية (الصورة المميزة) مفصولة بفاصلة ، وتتراكم افتراضيًا خلف الصورة الأولى.
url('<?php printf ($featured_image_src[0])?>')

يتم استخدام متغير الإشعار المحدد سابقًا لتعيين الصورة المميزة كخلفية لـ "قسم البطل".

نظرًا لأن الصورة الثانية المدرجة تتكدس تلقائيًا خلف الصورة الأولى ، فإن هذه المجموعة تنشئ تراكبًا داكنًا فوق صورة قسم البطل.
الآن ، كلما أضفت صورة مميزة إلى منشورك ، سيتم تطبيق تراكب داكن تلقائيًا.
يضيف مقتطف الشفرة التالي العنوان الرئيسي لمشاركتك داخل قسم البطل الجديد div.
<h1 class="entry-title"><?php the_title(); ?></h1>

يضيف المقتطف الأخير من الكود محتوى التعريف المنشور أسفل العنوان وداخل قسم البطل div.
<?php et_divi_post_meta(); ?>

إليك ما سيسمح لنا هذا القسم والتصميم الجديد بإنجازه في منشور الغد:

اخرج ما لا تحتاجه
نظرًا لأن لديك قسمًا جديدًا لصورتك المميزة ، وعنوان المنشور ، ونشر التعريف في مكانه ، فأنت بحاجة إلى إزالة ثلاثة أقسام من التعليمات البرمجية التي تم استخدامها لعرض صورتك المميزة ، وعنوان المنشور ، ونشر التعريف افتراضيًا.
ستحتاج إلى إخراج علامة h1 التي تعرض عنوان المشاركة:
<h1 class="entry-title"><?php the_title(); ?></h1>
ستحتاج إلى إخراج الكود الذي يعرض التعريف المنشور:
<?php et_divi_post_meta(); ?>
وستحتاج إلى إخراج الكود وعرض الصورة المصغرة المميزة:

print_thumbnail( $thumb, //$thumbnail["use_timthumb"], $titletext, //$width, $height );

هذا هو الكود الكامل لملف single.php الجديد. لا تتردد في نسخها ولصقها إذا واجهتك مشكلة.
ملاحظة: هذا هو مربع تمرير من التعليمات البرمجية. ستحتاج إلى التحديد والسحب للحصول على كل شيء.
<?php
get_header();
$show_default_title = get_post_meta( get_the_ID(), '_et_pb_show_title', true );
$is_page_builder_used = et_pb_is_pagebuilder_used( get_the_ID() );
?>
<div id="main-content">
<?php $featured_image_src = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' ); ?>
<div class="hero-section" style="background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('<?php printf ($featured_image_src[0])?>');">
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php et_divi_post_meta(); ?>
</div>
<div class="container">
<div id="content-area" class="clearfix">
<div id="left-area">
<?php while ( have_posts() ) : the_post(); ?>
<?php if (et_get_option('divi_integration_single_top') <> '' && et_get_option('divi_integrate_singletop_enable') == 'on') echo(et_get_option('divi_integration_single_top')); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_post' ); ?>>
<?php if ( ( 'off' !== $show_default_title && $is_page_builder_used ) || ! $is_page_builder_used ) { ?>
<div class="et_post_meta_wrapper">
<!-- h1 was here -->
<?php
if ( ! post_password_required() ) :
//et_divi_post_meta();
$thumb = '';
$width = (int) apply_filters( 'et_pb_index_blog_image_width', 1080 );
$height = (int) apply_filters( 'et_pb_index_blog_image_height', 675 );
$classtext = 'et_featured_image';
$titletext = get_the_title();
$thumbnail = get_thumbnail( $width, $height, $classtext, $titletext, $titletext, false, 'Blogimage' );
$thumb = $thumbnail["thumb"];
$post_format = et_pb_post_format();
if ( 'video' === $post_format && false !== ( $first_video = et_get_first_video() ) ) {
printf(
'<div class="et_main_video_container">
%1$s
</div>',
$first_video
);
} else if ( ! in_array( $post_format, array( 'gallery', 'link', 'quote' ) ) && 'on' === et_get_option( 'divi_thumbnails', 'on' ) && '' !== $thumb ) {
} else if ( 'gallery' === $post_format ) {
et_pb_gallery_images();
}
?>
<?php
$text_color_class = et_divi_get_post_text_color();
$inline_style = et_divi_get_post_bg_inline_style();
switch ( $post_format ) {
case 'audio' :
printf(
'<div class="et_audio_content%1$s"%2$s>
%3$s
</div>',
esc_attr( $text_color_class ),
$inline_style,
et_pb_get_audio_player()
);
break;
case 'quote' :
printf(
'<div class="et_quote_content%2$s"%3$s>
%1$s
</div> <!-- .et_quote_content -->',
et_get_blockquote_in_content(),
esc_attr( $text_color_class ),
$inline_style
);
break;
case 'link' :
printf(
'<div class="et_link_content%3$s"%4$s>
<a href="%1$s" class="et_link_main_url">%2$s</a>
</div> <!-- .et_link_content -->',
esc_url( et_get_link_url() ),
esc_html( et_get_link_url() ),
esc_attr( $text_color_class ),
$inline_style
);
break;
}
endif;
?>
</div> <!-- .et_post_meta_wrapper -->
<?php } ?>
<div class="entry-content">
<?php
do_action( 'et_before_content' );
the_content();
wp_link_pages( array( 'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'Divi' ), 'after' => '</div>' ) );
?>
</div> <!-- .entry-content -->
<div class="et_post_meta_wrapper">
<?php
if ( et_get_option('divi_468_enable') == 'on' ){
echo '<div class="et-single-post-ad">';
if ( et_get_option('divi_468_adsense') <> '' ) echo( et_get_option('divi_468_adsense') );
else { ?>
<a href="<?php echo esc_url(et_get_option('divi_468_url')); ?>"><img src="<?php echo esc_attr(et_get_option('divi_468_image')); ?>" alt="468" class="foursixeight" /></a>
<?php }
echo '</div> <!-- .et-single-post-ad -->';
}
?>
<?php if (et_get_option('divi_integration_single_bottom') <> '' && et_get_option('divi_integrate_singlebottom_enable') == 'on') echo(et_get_option('divi_integration_single_bottom')); ?>
<?php
if ( ( comments_open() || get_comments_number() ) && 'on' == et_get_option( 'divi_show_postcomments', 'on' ) ) {
comments_template( '', true );
}
?>
</div> <!-- .et_post_meta_wrapper -->
</article> <!-- .et_pb_post -->
<?php endwhile; ?>
</div> <!-- #left-area -->
<?php get_sidebar(); ?>
</div> <!-- #content-area -->
</div> <!-- .container -->
</div> <!-- #main-content -->
<?php get_footer(); ?>
هذا كل شيء لهذا اليوم!
الآن تم الانتهاء من العمل الشاق وإطار العمل جاهز لنا لإضافة أسلوبنا إلى تنسيقات منشوراتنا. سأقوم غدًا بإعداد وتصميم جميع تنسيقات منشورات المدونة الستة باستخدام نموذج single.php الذي أنشأناه للتو.

يرجى نشر تعليقاتك أدناه وسأبذل قصارى جهدي لمعالجة أي مشاكل قد تكون لديك. إذا كان ذلك ممكنًا ، يرجى التأكد من أن لديك تثبيتًا جديدًا لأحدث إصدار من WordPress و Divi لتجنب أي تعارضات محتملة.
حتى الغد!
