【视频教程五】如何在产品故事下添加图片和文章标题缩短问题 -wordpress教程

吾爱互联

                                <b>[文章目录]</b>
                                <ul id="index-ul">
<li>如何在产品故事下添加图片效果</li>
<li>解决文章标题字数缩短的问题</li>
<li>解决文章标题字数缩短的问题css代码</li>
<li>第二种方法添加函数的方法</li>
<li>然后在文章调用标题的地方换成这个就行的了</li>
</ul>
                        </div>
如何在产品故事下添加图片和文章标题缩短问题
通过视频再为大家操作演示
一：
<h2 id="title-0">如何在产品故事下添加图片效果
<div class="dp-highlighter">
<ol class="dp-c" start="1">
<li class="alt"><?php the_content(__(‘阅读剩余部分…’));?></li>
</ol>
</div>
<div class="dp-highlighter">
<div class="bar"></div>
<ol class="dp-c" start="1">
<li class="alt"><?php <span class="func">echo</span> mb_strimwidth(<span class="func">strip_tags</span>(apply_filters('the_content', <span class="vars">$post</span>->post_content)), 0, 300,<span class="string">""</span>); <span class="comment">//修改显示字数 ?> <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink() ?>" rel="nofollow">【阅读更多】</a></span></li>
</ol>
</div>
在p标签下方添加
<div class="dp-highlighter">
<div class="bar"></div>
<ol class="dp-c" start="1">
<li class="alt"><img src=<span class="string">"http://localhost/wordpress/wp-content/uploads/2014/06/4a3a1b4fd289fb36da78b.jpg"</span> /></li>
</ol>
</div>
二：
<h2 id="title-1">解决文章标题字数缩短的问题
<div class="dp-highlighter">
<ol class="dp-c" start="1">
<li class="alt">text-overflow:ellipsis;white-space:nowrap;overflow:hidden;</li>
</ol>
</div>
<h2 id="title-2">解决文章标题字数缩短的问题css代码
<div class="dp-highlighter">
<div class="bar"></div>
<ol class="dp-c" start="1">
<li class="alt">.post-title{</li>
<li></li>
<li class="alt">width:250px; <span class="comment">/* 限制宽度（可选） */</span></li>
<li></li>
<li class="alt">white-space:nowrap; <span class="comment">/* 禁止自动换行 */</span></li>
<li></li>
<li class="alt">overflow:hidden; <span class="comment">/* 隐藏溢出的内容 */</span></li>
<li></li>
<li class="alt">text-overflow:ellipsis; <span class="comment">/* 溢出文本使用...代替 */</span></li>
<li></li>
<li class="alt">}</li>
</ol>
</div>
<h2 id="title-3">第二种方法添加函数的方法
<div class="dp-highlighter">
<div class="bar"></div>
<ol class="dp-c" start="1">
<li class="alt">在<span class="keyword">function</span>.php中添加就可以了</li>
<li></li>
<li class="alt"><span class="keyword">function</span> customTitle(<span class="vars">$limit</span>) {</li>
<li><span class="vars">$title</span> = get_the_title(<span class="vars">$post</span>->ID);</li>
<li class="alt"><span class="keyword">if</span>(<span class="func">strlen</span>(<span class="vars">$title</span>) > <span class="vars">$limit</span>) {</li>
<li><span class="vars">$title</span> = <span class="func">substr</span>(<span class="vars">$title</span>, 0, <span class="vars">$limit</span>) . <span class="string">'...'</span>;</li>
<li class="alt">}</li>
<li></li>
<li class="alt"><span class="func">echo</span> <span class="vars">$title</span>;</li>
<li>}</li>
</ol>
</div>
<h2 id="title-4">然后在文章调用标题的地方换成这个就行的了
<div class="dp-highlighter">
<ol class="dp-c" start="1">
<li class="alt"><?php customTitle(30); ?></li>
</ol>
</div>
免费视频下载地址：
<span style="color: #ff0000;"><strong><span style="color: #ff0000;">百度网盘</span></strong><strong>  (高清版)</strong></span>
&nbsp;
在线观看
&nbsp;
<div style="margin-left:190px;">
<embed src="http://www.tudou.com/v/3slaNNjq1Os/&#038;bid=05&#038;rpid=376863237&#038;resourceId=376863237_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="480" height="400"></embed>
</div>