Agregar una clase div o id dentro de the_content()

Question

Agregar una clase div o id dentro de the_content()

21 may 2011, 23:41:25

Vistas: 27.7K

Votos: 4

Estoy tratando de crear un bloque de anuncios para colocarlo en una entrada individual (single.php) de tal manera que la clase div o id esté alineada a la izquierda y el contenido de la entrada se ajuste alrededor. Revisé el archivo single.php y este es el único código que noto que muestra la entrada.

<div class="entry entry-content">
                <?php the_content(); ?>
                <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Páginas:', 'themejunkie' ), 'after' => '</div>' ) ); ?>

Intenté agregar el código tanto encima del div 'entry-content' como también después de the_content, pero con ambos métodos muestra el div ya sea al principio o al final del contenido de la entrada.

¿Alguien puede decirme qué archivos debo revisar para agregar esto?

swordfish81

566

publicaciones el contenido

Comentarios

Lo resolví. Era un problema con el plugin de compartir publicaciones. Tuve que desactivar la opción de agregar automáticamente a la publicación y usar la opción de inserción manual.

swordfish81

21 may 2011 23:57:12

Todas las respuestas a la pregunta

¿Por qué no simplemente usar el hook de filtro the_content y añadir tu código a the_content()? Por ejemplo:

function mytheme_content_ad( $content ) {
    $myadcode = '<div class="someclas">';
    $myadcode .= 'algún texto con el código del anuncio';
    $myadcode .= '</div>';

    $filteredcontent = $myadcode . $content;

    return $filteredcontent;
}
add_filter( 'the_content', 'mytheme_content_ad' );

Puede que necesites hacer la función un poco más sofisticada que esto, pero debería transmitir la idea general.

Chip Bennett

55.1K

22 may 2011 02:41:50

Comentarios

Gracias roman. Ahora tengo un nuevo problema. El bloque div aparece alineado a la izquierda al inicio de las etiquetas <p> en la publicación. ¿Hay alguna manera de desplazar este bloque unos 200px hacia abajo y que la publicación de WordPress fluya alrededor de este anuncio? Si uso margin-top: 200px, deja un espacio en blanco.

swordfish81

22 may 2011 00:11:19

Bueno, esta vez CSS no es suficiente. Si quieres colocar un anuncio dentro de tu contenido real, tienes que a) incluir el anuncio dentro de tu publicación durante la edición con un shortcode o b) agregar un filtro para the_content() que dividirá el contenido en partes, agregará tu anuncio y mostrará el nuevo contenido.

Roman

22 may 2011 00:20:21

@Sledge81 Un nuevo problema no pertenece a un comentario. Por favor usa Preguntar para esto. De lo contrario, nadie más encontrará la solución. Las preguntas puras de CSS pertenecen a StackOverflow sin embargo...

fuxia

22 may 2011 01:01:27

Agrega un div.spacing antes del div.advertisement y añade .spacing{float:left;width:1px;height:200px}. Luego, el div.advertisement necesita clear:left. Dudo en modificar tanto tu respuesta.

fuxia

22 may 2011 01:05:46

Gracias toscho... Tu código funcionó. Lo tendré en cuenta para la próxima vez.

swordfish81

22 may 2011 10:00:42

Usando el ejemplo para añadir clases a la etiqueta p y a la etiqueta h2.

<?php
function replace_content($text_content)
{
    if (is_page()) {
        $text = array(
            '<p>' => '<p class="text-danger">', // Reemplaza la etiqueta <p> con clase "text-danger"
            '<h2>' => '<h2 class="h2">', // Reemplaza la etiqueta <h2> con clase "h2"
        );
    }
    $text_content = str_ireplace(array_keys($text), $text, $text_content);
    return $text_content;
}
add_filter('the_content', 'replace_content'); // Aplica el filtro al contenido
?>

Mohammad Ayoub Khan

191

10 jun 2021 14:04:07

Roman 4.5K · Accepted Answer · 2011-05-22T00:05:28Z

Debes colocar tu bloque de publicidad justo antes de <?php the_content(); ?> en una capa div separada y añadir algo de CSS. Por ejemplo:

single.php

<div class="entry entry-content">
    <div class="advertisement">
        <p>Tu publicidad</p>
    </div>

    <?php the_content(); ?>
</div>

CSS

div.advertisement {
    float: left;
    width: 150px;
    padding: 0px 10px 10px 0px;
}

Roman

4.5K

22 may 2011 00:05:28