因此，我为一个创建可扩展转录盒的客户端制作了这个短代码。除非代码中有换行符，否则它按预期工作。然后在div内创建一个额外的p标记
function transciptor( $atts = \'\' ) {
$value = shortcode_atts( array(
\'text\' => \'\',
\'title\' => \'Video transcript:\'
), $atts );
return \'
<style>
#trans_title {
margin: 0 auto;
width: calc(60% + 48px);
font-weight: bold;
}
#transcript_div > p {
width: 60%;
margin: 0 auto;
max-height: 500px;
overflow: scroll;
padding: 24px;
background-color: #e9f4fb;
transition: 200ms;
}
#transcript_div > a {
text-align: center;
display: block;
margin: 0 auto;
width: fit-content;
background-color: #252a2d;
padding: 12px 36px;
border-radius: 36px;
position: relative;
bottom: 24px;
color: white;
}
</style>
<p id="trans_title">\'.$value[\'title\'].\'</p>
<div id="transcript_div">
<p>\'.$value[\'text\'].\'</p>
<a href="#">Expand</a>
</div>
<script>
trans_text = document.querySelector("#transcript_div > p");
trans_btn = document.querySelector("#transcript_div > a");
expanded = false;
trans_btn.onclick = function(event){
event.preventDefault();
expanded = !expanded;
if(expanded == false){
trans_text.style.maxHeight = "500px";
trans_btn.innerHTML = "Expand";
}
if(expanded == true){
trans_text.style.maxHeight = "fit-content";
trans_btn.innerHTML = "Collapse";
}
}
</script>
\';
}
add_shortcode( \'transcript\', \'transciptor\' );
例如，输入如下代码：
[transcript text="example line
example line"]
创建两个段落标记。我如何获得快捷码来添加换行符，而不是制作额外的p标记？
UPDATED WITH $CONTENT
function transciptor( $atts = \'\', $content ) {
$value = shortcode_atts( array(
\'title\' => \'Video transcript:\'
), $atts );
return \'
<style>
#trans_title {
margin: 0 auto;
width: calc(60% + 48px);
font-weight: bold;
}
#transcript_div > p {
width: 60%;
margin: 0 auto;
max-height: 500px;
overflow: scroll;
padding: 24px;
background-color: #e9f4fb;
transition: 200ms;
}
#transcript_div > a {
text-align: center;
display: block;
margin: 0 auto;
width: fit-content;
background-color: #252a2d;
padding: 12px 36px;
border-radius: 36px;
position: relative;
bottom: 24px;
color: white;
}
</style>
<p id="trans_title">\'.$value[\'title\'].\'</p>
<div id="transcript_div">
<p>\'.$content.\'</p>
<a href="#">Expand</a>
</div>
<script>
trans_text = document.querySelector("#transcript_div > p");
trans_btn = document.querySelector("#transcript_div > a");
expanded = false;
trans_btn.onclick = function(event){
event.preventDefault();
expanded = !expanded;
if(expanded == false){
trans_text.style.maxHeight = "500px";
trans_btn.innerHTML = "Expand";
}
if(expanded == true){
trans_text.style.maxHeight = "fit-content";
trans_btn.innerHTML = "Collapse";
}
}
</script>
\';
}
add_shortcode( \'transcript\', \'transciptor\' );
最合适的回答,由SO网友:dyg 整理而成
您可以尝试使用封闭表单编写短代码，并使用$content返回的变量。
您需要使用额外的参数声明短代码函数：
function transciptor( $atts = \'\', $content ) {
然后将您的短代码写为：
[transcript]
place the value that
will be passed to
$content here
[/transcript]
请注意短代码的替代语法。有关于它的信息
in the codex here.如果p标签仍然存在，我会看到另外两个选项。不要将您的shortcode参数包含在段落标记中，即。
\'.$value[\'text\'].\'
而不是
<p>\'.$value[\'text\'].\'</p>
或者，您可以使用以下内容解析变量中的p标记：
$value[\'text\'] = str_replace("<p>", "", $value[\'text\']);
$value[\'text\'] = str_replace("</p>", "<br>", $value[\'text\']);
