Как добавить разное описание для разной карточки?

Question

[Pashtet221]

Есть код, работает не совсем так, как нужно под каждую карточку подставляет свою картинку но одинаковое для всех описание. Хочу сделать так, чтобы у каждой карточки было свое описание и можно было настраивать через плагин ACF повторитель Wordpress

<!-- Карточки -->
    <div class="posts-container">
        <div class="post">
            <img src="img/posts/post1.png" class="post-img" alt="">
            <div class="likes">
                <img src="img/icon/white-heart.png" class="icon" alt="">
                <p class="likes-count">2.7k likes</p>
            </div>
        </div>
        <div class="post">
            <img src="img/posts/post2.png" class="post-img" alt="">
            <div class="likes">
                <img src="img/icon/white-heart.png" class="icon" alt="">
                <p class="likes-count">2.7k likes</p>
            </div>
        </div>
        <div class="post">
            <img src="img/posts/post3.png" class="post-img" alt="">
            <div class="likes">
                <img src="img/icon/white-heart.png" class="icon" alt="">
                <p class="likes-count">2.7k likes</p>
            </div>
        </div>
        <div class="post">
            <img src="img/posts/post4.png" class="post-img" alt="">
            <div class="likes">
                <img src="img/icon/white-heart.png" class="icon" alt="">
                <p class="likes-count">2.7k likes</p>
            </div>
        </div>
        <div class="post">
            <img src="img/posts/post5.png" class="post-img" alt="">
            <div class="likes">
                <img src="img/icon/white-heart.png" class="icon" alt="">
                <p class="likes-count">2.7k likes</p>
            </div>
        </div>
        <div class="post">
            <img src="img/posts/post6.png" class="post-img" alt="">
            <div class="likes">
                <img src="img/icon/white-heart.png" class="icon" alt="">
                <p class="likes-count">2.7k likes</p>
            </div>
        </div>
        <div class="post">
            <img src="img/posts/post7.png" class="post-img" alt="">
            <div class="likes">
                <img src="img/icon/white-heart.png" class="icon" alt="">
                <p class="likes-count">2.7k likes</p>
            </div>
        </div>
        <div class="post">
            <img src="img/posts/post8.png" class="post-img" alt="">
            <div class="likes">
                <img src="img/icon/white-heart.png" class="icon" alt="">
                <p class="likes-count">2.7k likes</p>
            </div>
        </div>
        <div class="post">
            <img src="img/posts/post9.png" class="post-img" alt="">
            <div class="likes">
                <img src="img/icon/white-heart.png" class="icon" alt="">
                <p class="likes-count">2.7k likes</p>
            </div>
        </div>
    </div>




<!-- Описание карточек внутри -->
    <div class="post-popup">
        <div class="close-overlay"></div>
        <div class="post">
            <div class="post-feed">
                <div class="post-overlays">
                    <img src="img/icon/red-heart.png" class="like-icon" alt="">
                    <div class="share-window">
                        <h1 class="title">share the post with others</h1>
                        <div class="share-link-container">
                            <input type="text" id="share-link" value="https://www.socialize.com/post/234234234234" disabled>
                            <button class="copy-btn">copy</button>
                        </div>
                    </div>
                </div>
                <div class="post-img-container">
                    <img src="img/posts/post1.png" alt="">
                    <img src="img/posts/post2.png" alt="">
                    <img src="img/posts/post3.png" alt="">
                    <img src="img/posts/post4.png" alt="">
                    <img src="img/posts/post5.png" alt="">
                </div>
            </div>

            <div class="feed">
                <div class="post-header">
                    <img src="img/user2.png" class="user-icon" alt="">
                    <p class="username">@modernweb</p>
                </div>
                <div class="post-detail">
                    <div class="detail-intracables">
                        <img src="img/icon/heart-nofill.png" class="like-btn" alt="">
                        <img src="img/icon/send-nofill.png" class="send-btn" alt="">
                        <img src="img/icon/comment-nofill.png" class="comment-btn" alt="">
                    </div>
                    <p class="post-des">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores ipsa incidunt
                        obcaecati esse illo voluptates libero debitis nisi. Id tempora vel illum vitae temporibus commodi
                        non cupiditate atque voluptas. Ipsam.
                    </p>

                    <div class="comments-container">
                        <div class="comment-card">
                            <img src="img/user1.png" class="user-dp" alt="">
                            <div class="comment-body">
                                <span class="username">@modernweb</span>
                                <p class="comment">this is amazing </p>
                            </div>
                        </div>
                        <div class="comment-card">
                            <img src="img/user2.png" class="user-dp" alt="">
                            <div class="comment-body">
                                <span class="username">@alex</span>
                                <p class="comment">this is amazing </p>
                            </div>
                        </div>
                        <div class="comment-card">
                            <img src="img/user3.png" class="user-dp" alt="">
                            <div class="comment-body">
                                <span class="username">@siri</span>
                                <p class="comment">this is amazing </p>
                            </div>
                        </div>
                        <div class="comment-card">
                            <img src="img/user4.png" class="user-dp" alt="">
                            <div class="comment-body">
                                <span class="username">@jack</span>
                                <p class="comment">this is amazing </p>
                            </div>
                        </div>
                    </div>

                    <div class="comment-box">
                        <input type="text" id="comment-input" placeholder="Add a comment">
                        <button class="add-comment-btn"><img src="img/icon/comment-nofill.png" alt=""></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

Comments

[Pashtet221]

[Kvason]

the_content();

[Антон Литвиненко]

я тут не вижу кода от слова совсем. только верстка. если детализированное описание задумано к каждой карточке кодом, вопрос один, если оно одно на всех, то нужно тогда передавать в нее денные с карточек которых на текущий момент там нет

[Pashtet221]

Антон Литвиненко, а как это сделать?

[Kvason]

Pashtet221, я сверху написал, команда выводит контент записи

[Pashtet221]

Kvason, да, я прочел, но как сказал Антон Литвиненко описание одно для всех ... Я пробовал обернуть в <div></div> под каждую карточку, но ничего не вышло

[Kvason]

Pashtet221, так тебе надо чтобы было одинаковое или разное?

[Pashtet221]

Kvason, разное

[Kvason]

Pashtet221, ну так чем тебе зе контент не подходит, в самой записи вп пиши текст и выводи его вместо лорем ипсум

Answer 1

[Артем Золин]

Для этого существует база данных — вы делаете запрос, получаете ответ, обрабатываете и выводите во фронт в нужном вам виде. В WordPress для этого существуют нативные функции, которые значительно упрощают вашу работу

• the_title() — выводит заголовок записи
  
• the_author() — выводит автора записи
  
• the_content() — выводит контент записи
  
• the_post_thumbnail() — выводит изображение записи