WordPress — Как разбить содержимое на две части, чтобы использовать php the_content1 и php the_content2
У меня есть фрагмент содержимого в текстовой области, который я могу динамически вызывать с помощью <php the_content ?> Смотрите полный код ниже.
Проблема в том, что у меня нет назначенной области для изображения. (Я открыт для вариантов создания одного, но я думаю, что это будет слишком много усилий), в любом случае, есть ли что-нибудь, что я могу сделать (JQuery / JS в порядке), что я могу вызвать изображение, чтобы заполнить: <?php echo $the_content['image'] ?> что вы видите в моем коде, который, очевидно, не работает? В то же время оставляя фактическую часть текста или остальную часть содержимого отдельно.
Я прилагаю иллюстрацию для более наглядного представления о том, что я ищу
Вот весь код этого раздела
<section class="box classes-box" id="classes_box"><!-- Section Events -->
<div class="container light-grey-background">
<div class="row">
<div class="col-md-6 no-padding">
<div class="boxing-classes" style="background-image: url('<?php echo $the_content['image'] ?>')">
<div class="classes">
<nav class="classes-nav">
<ul class="clean-list toggle-list clearfix">
<?php foreach($slides as $i => $slide): ?>
<li class="classes-menu-item ">
<input type="radio" id="toggle-<?php echo $slide['post']->ID; ?>" name="toggle-helper" autocomplete="off">
<label for="toggle-<?php echo $slide['post']->ID; ?>"><?php echo get_the_title( $slide['post']->ID ) ?></label>
</li>
<?php endforeach; ?>
</ul>
</nav>
</div>
</div>
</div>
<div class="col-md-6 no-padding ">
<?php foreach($slides as $i => $slide): ?>
<div class="classes-content-block" id="classes_content_<?php echo $slide['post']->ID ?>" style="display:none;">
<header class="padding white-background">
<h2 class="entry-header black-background"><?php echo get_the_title( $slide['post']->ID ) ?></h2>
</header>
<div class="entry-content padding">
<?php echo apply_filters('the_content', $slide['post']->post_content); ?>
<?php if ( !empty( $slide['options']['button'] )): ?>
<div class="white-background">
<a class="read-more text-center red-black-hover" href="<?php echo $slide['options']['button']['link'] ? $slide['options']['button']['link'] : '#'; ?>"><?php echo $slide['options']['button']['link_text'] ? $slide['options']['button']['link_text'] : 'View Timeline' ; ?></a>
</div>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
Решение
Обычно люди создают Короткий номер это произведет желаемый HTML, что-то вроде:
[image-block src="apple-touch-icon.png" class="all-imgs" id="my-img"]The content[/image-block]
Это был бы короткий код:
add_shortcode( 'image-block', function( $atts, $content) {
return sprintf(
'<div class="left"><img src="%1$s" class="%2$s" id="%3$s"></div><div class="right">%4$s</div>',
$atts['src'],
$atts['class'],
$atts['id'],
$content
);
});
И это вывод:
Другие решения
См. CSS свойство FLOAT: слева | справа
<div id=container class="clearfix">
<div class="image-wrapper" style="float:left;max-width:50%;padding:0;margin:0">
<img src="https://web-answers.ru/wp-content/uploads/2019/03/mypicture.jpg" alt="" class="rwd-image" id="mymage">
</div>
<div class="content-wrapper" style="float:left;max-width:50%;padding:0;margin:0">
<p>Lorem Ipsum</p>
</div>
</div>