Tips on how to make two excerpts within each wordpress article [closed]

Navigation
0

I need tips on how to create excerpts (summaries) in Wordpress, I have a little knowledge on the platform, but still very limited and I do not know where to start.

There are two summaries within each blog article, a standard form. Where the characters to be displayed will be limited. I already searched for information in several places and did not find it.

The same as the image below. With the text summarized in 6 lines and "SEE MORE"

I do not have code yet, because I really do not know where to start. I need tips, information, links, anything that gives me a "north".

Exampleofthelink"view more"

    
asked by anonymous 28.11.2018 / 14:00

1 answer

0

Here is a simple template that can help you. If your text is shorter than 6 lines, simply remove the "Read more"

The technique is to use a Label with a for for the checkbox that is hidden outside the .box . When this checkbox is marked by clicking label the .box increases and shows the whole content. Since .box has height max-height it will always fit with your content, unless it is more than 1000px in height, which is quite unlikely, but if you need tb just change that value ...

See work for you to understand better. I left the comments in the code to help you 

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
.box {
	border: 1px solid #000;
	display: flex;
	flex-direction: column;
	margin: 1rem;
/* altura inicial do box, mude aqui o suficiente para mostrar quanto quiser do conteúdo inicial */
	max-height: 200px;
	position: relative;
	padding: 0 1rem 2rem;
	box-sizing: border-box;
	overflow: hidden;
	transition: max-height 500ms;
}
input:checked + .box {
	max-height: 1000px;
	/* hake para fazer o box crescer, o tamanho máximo dele é 1000px ou menosse o conteúdo for menor */
}
.box > label {
	cursor: pointer;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	margin-left: 1rem;
	height: 3rem;
	line-height: 3rem;
	background-image: linear-gradient(to bottom, transparent, #fff 25%);
	color: red;
}
.box > label:hover {
	text-decoration: underline;
}
#ler {
	display: none; 
	/* remove o checkbox da tela */
}
<!-- quando o input for checado o box cresce -->
<input type="checkbox" name="" id="ler" hidden>
<div class="box">
  <div>
    <p>1 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste, aut!</p>
    <p>2 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste, aut!</p>
    <p>3 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste, aut!</p>
    <p>4 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste, aut!</p>
    <p>5 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste, aut!</p>
    <p>6 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste, aut!</p>
    <p>7 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste, aut!</p>
    <p>8 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste, aut!</p>
  </div>
  <!-- label para checar o checkbox quando for clicada -->
  <label for="ler">leia mais</label>
</div>
    
28.11.2018 / 15:52
Calling Functions by Shell With open edit within a modal Laravel