Muchas veces cuando publicamos algunos artículos en WordPress contienen un montón de código, generalmente no me gusta comprimir el código y me gusta que el código se muestre formateado, pero la pantalla formateada generalmente hace que el contenido del artículo se vea mucho, no es conveniente para los visitantes navegar, por lo que hoy voy a presentar una función que puede expandir / contraer el contenido del artículo.
Métodos:
1. Agregue el siguiente código en header.php, o escriba en un archivo js por separado y luego introduzca en header.php. Yo soy el que lo introdujo.
|
1
2
3
4
5
6
7
|
<script type="text/javascript"> jQuery(document).ready(function(jQuery) { jQuery('.collapseButton').click(function() { jQuery(this).parent().parent().find('.xContent').slideToggle('slow'); }); });</script> |
2. Añade el siguiente código en function.php:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//展开收缩功能function xcollapse($atts, $content = null){ extract(shortcode_atts(array("title"=>""),$atts)); return '<div style="margin: 0.5em 0;"> <div class="xControl"> <span class="xTitle">'.$title.'</span> <a href="javascript:void(0)" class="collapseButton xButton">展开/收缩</a> <div style="clear: both;"></div> </div> <div class="xContent" style="display: none;">'.$content.'</div> </div>';}add_shortcode('collapse', 'xcollapse'); |
3. Puede optimizar el código, porque por defecto está a la izquierda, no es bueno, le pedimos que muestre un poco al medio, la distancia específica se puede ajustar por sí mismo. Por supuesto, este paso también está bien ignorado.
Añade el siguiente código en style.css:
|
1
2
3
|
.xControl { padding-left: 32px;} |
4. Esto se puede hacer insertando un código corto en el artículo.
para utilizar esta función. Donde el título se refiere a agregar algo de contenido de sugerencia, por supuesto, también puede omitir el título no escrito.