欢迎光临
请一秒记住我们的网址:www.xinfangs.com !

网站改版结束-四不像主题来了,请君鉴赏,指正

时间煮雨阅读(826)

网玩站就要有一个随意折腾的心,历经一周,网站改版暂时可以停一段落了。本站基于DUX主题,二次魔改,添加了一此其它实用的功能,不过因本人技术能力有限,网站可能存在一些未知BUG!在访问本站时,若出现一些错误,请及时在本站留言说明,谢谢~

先来看看主站效果图吧:

这次网站魔改,首页先是增加了四栏文章,双栏有图,双栏无图,重新美化了友情链接的样式,又增加了现在网站主流的文章投稿,友情链接自助申请,留言面板也重做了调整,使各个功能在使用上,更符合本身的需求。我们就先来看有哪些变化吧。

1.首页增加了四栏样式文章展示栏


调整后网站首页可以按照自己的需求展示更多的内容,这个栏目在侧栏用法比较多,主流是最新发布,最新评论,最热文章 一类的,这里是可以按我们自己的需求展示自己需要展示的分类目录。

2.首页增加了双栏有图,无图的两个栏目


我们此次的目的是想在首页多展示些我们需要展示的内容,并且还不会显得那么单调,同时在多展示内容的同时,栏目间还可以按照自己的需求去展示更多的广告,为自己创收吧。

3.更改了友情链接样式,做了自适应,更符合手机用户的习惯

4.增加了文章投稿页面。

5.重新调整了讨论留言板的样式

6.增加了友情链接自助申请页面

7.重写了网址导航页面,

8.增加了另类导航-本站主做短视频导航

9.综合调整。

调整了首页侧边栏,幻灯片banner 自适应的bug,调整了面包屑导航的内容,以及网站从主页到文章,页面自适应的各种问题。

这次魔改也要感谢下面几位博主数据的支持

网址导航:缙哥哥博客的网址导航
投稿页面:露兜即刻投稿功能添加富文本编辑器
首页四栏,有图无图两栏:Boke112百科
再次感谢各位大佬的支持,拜谢!

WordPress外观-自定义报错解决:Uncaught Exception: Supplied nav_menu_item..

时间煮雨阅读(862)

最近不少用户反馈说WordPress后台的外观-自定义点开后直接报错,错误信息如下:

Fatal error: Uncaught Exception: Supplied nav_menu_item value missing property: description

这个错误其实是WordPress程序的内部错误,但我们给出了一个解决的办法。

解决办法:
复制以下代码到主题的 functions.php 中即可
add_filter('wp_get_nav_menu_items', 'my_wp_get_nav_menu_items', 10, 3);
function my_wp_get_nav_menu_items($items, $menu, $args) {
    foreach($items as $key => $item)
    $items[$key]->description = '';
    return $items;
}

针对次错误,如果你有其他更好的解决办法,可以评论分享一下。

本来是themebetter原创,转载请注明:https://themebetter.com/supplied-nav-menu-item.html

WordPress如何截取文章摘要|文章标题|文章内容字数

Aliyuncms阅读(1638)

在制作WordPress主题时,尤其是首页和类别页面时,我们需要控制文章的摘要和标题中的字数,以使整体布局更合理,更美观。 今天,与你分享几种截取WordPress文章摘要内容和标题字数的方法。

一、使用WordPress内置函数wp_trim_words()进行截取

WordPress的内置wp_trim_words()函数专门用于限定字数的内容,例如文章摘要,内容和标题。

<?php
echo wp_trim_words( get_the_content(), 55 ); // 文章内容
echo wp_trim_words( get_the_excerpt(), 55 ); // 文章摘要
echo wp_trim_words( get_the_title(), 30 ); // 文章标题
?>

wp_trim_words()函数基本用法:

<?php $trimmed = wp_trim_words( $text, $num_words = 55, $more = null ); ?>
参数说明:
$text(字符串) (必需) 要截取的内容,默认: 无;
$num_words(整数) (可选) 限定的字数,默认: 55;
$more(字符串) (可选) 截取后加在尾部的字符,默认: ‘…’

示例说明:

<?php
$content = get_the_content();
$trimmed_content = wp_trim_words( $content, 55, '<a href="'. get_permalink() .'"> ...阅读更多</a>' );
echo $trimmed_content;
?>

Ps:可以修改上面的数字55来设定长度。

二、使用php函数mb_strimwidth()进行截取

mb_strimwidth是一个超轻量级的php函数,用于获取指定宽度截断字符串。
mb_strimwidth()函数基本用法:

<?php
echo mb_strimwidth(get_the_title(), 0, 30,"...");
?>
<?php
mb_strimwidth(string $str,int $start, int $width [,string $trimmarker [, string $encoding ]] )
?>
参数说明:
$str //指定字符串
$start //指定从何处开始截取
$width //截取文字的宽度
$trimmarker //超过$width数字后显示的字符串

示例说明:

1.平时我们调用文章标题都是这样:

<?php the_title(); ?>

现在我想控制标题的输出字数,只需要使用mb_strimwidth函数后变成这样:

<?php echo mb_strimwidth(get_the_title(), 0, 30,"..."); ?>

注:可以修改上面的数字30来设定长度。

三、使用原生函数customTitle()进行截取

将下面的代码添加到主题的functions.php文件中:

function customTitle($limit) {
    $title = get_the_title($post->ID);
    if(strlen($title) > $limit) {
        $title = substr($title, 0, $limit) . '...';
    }
    echo $title;
}

在需要调用的地方添加下面的代码即可:

<?php customTitle(30); ?>

四、使用自定义函数cut_str ()进行截取

//标题截断
function cut_str($src_str,$cut_length){$return_str='';$i=0;$n=0;$str_length=strlen($src_str);
        while (($n<$cut_length) && ($i<=$str_length))
        {$tmp_str=substr($src_str,$i,1);$ascnum=ord($tmp_str);
        if ($ascnum>=224){$return_str=$return_str.substr($src_str,$i,3); $i=$i+3; $n=$n+2;}
        elseif ($ascnum>=192){$return_str=$return_str.substr($src_str,$i,2);$i=$i+2;$n=$n+2;}
        elseif ($ascnum>=65 && $ascnum<=90){$return_str=$return_str.substr($src_str,$i,1);$i=$i+1;$n=$n+2;}
        else {$return_str=$return_str.substr($src_str,$i,1);$i=$i+1;$n=$n+1;}
    }
    if ($i<$str_length){$return_str = $return_str . '...';}
    if (get_post_status() == 'private'){ $return_str = $return_str . '(private)';}
    return $return_str;};

在需要调用的地方添加下面的代码即可:

<?php echo cut_str($post->post_title,30); ?>

搜索页“点我看小姐姐视频”代码

时间煮雨阅读(1558)

可能是大家都喜欢看小姐姐的原因,很多人都找我搜索页 “点我看小姐姐视频”的代码,不给把加微信问我要我也不好拒绝,今天直接把代码给你们安排上了。祝大家免年大吉,事事顺心。

首先来看一下“点我看小姐姐视频”的效果:(搜索任何东西即可在右侧查盾):

演示效果:

直接上代码:

<div class="textwidget custom-html-widget">
<section id="xiaojiejie"> 
<style>#player { margin: 1px auto; max-width: 100%; border-radius: 10px; display: block; } #xjjsp { display: none; } #ckxjj,#gbxjj { width: 100%; height: 40px; border: none; background-color: #4387fd; color: #fff; margin-top: 1px; border-radius: 5px; font-size: 18px; cursor: pointer; transition: 0.2s; } #ckxjj:hover,#gbxjj:hover { background-color: #4387fd; } .kzsp { width: 100%; display: flex; justify-content: space-between; } .kzsp>button { border: none; height: 40px; padding: 0 30px; font-size: 16px; background-color: #4387fd; border-radius: 10px; color: #fff; transition: 0.3s; cursor: pointer; } .kzsp>button:active { background-color: #4387fd; }</style>
<div class="xiaojiejie">
<button type="button" id="ckxjj" style="display: none;">点我看小姐姐视频</button>
<div id="xjjsp" style="display: block;">
<video id="player" src="https://api.woeo.net/API/api-girl/index.php" controls="" alt="小姐姐视频"></video>
<div class="kzsp"><button id="switch">连续: 开</button><button id="next">下一个</button></div>
<button type="button" id="gbxjj">关闭视频</button></div>
<script type="text/javascript" src="https://www.xinfangs.com/wp-content/themes/Aliyun/js/xjj.js"></script>
</div></section></div>

WordPress高亮插件:Highlighting Code Block

时间煮雨阅读(1727)

这是一款比较简约的代码高亮插件,用起来也很方便,支持经典编辑器和古登堡编辑器。

配色也很听讨好,不挑网站,操作非常简单,在编辑器中,均有对应的按钮来操作,代码复制进去就可以,另外还支持显示代码的对应语言。

以下演示一下:

插件使用教程

1、下载安装插件:网站后台——插件——搜索插件「Highlighting Code Block」在线安装。或者前往 wordpress 插件中心进行下载:

2、点击安装

3、点击插件上的激活

Wordpress插件-非常漂亮的Wordpress代码高亮插件Prism.js(仿Mac OS)

时间煮雨阅读(1818)

漂亮的 Prism.js 代码高亮插件,在原有的 Prism.js 的基础上添加了一些小小的改动,仿 Mac OS 风格。

一、示例代码

本就是使用的 Prism.js ,只不过在原有的 Prism 的基础上添加了一些小小的改动,仿 Mac OS 风格(附件下载),我们直接来一段代码示例:

HTML

<!DOCTYPE html>
<html>
<head>
    <script src="<?php bloginfo('template_directory'); ?>/prism/prism.js"></script>
    <link href="<?php bloginfo('template_directory'); ?>/prism/prism.css" rel="stylesheet" />
</head>
<body>
    ...
    
</body>
</html>

CSS:

.container .content .copy-link{
    border:1px solid #E5E5E5;
    background:#f9f9f9;
    padding:15px 15px 15px 120px;
    margin-bottom:30px;
    position: relative;
    margin-top:90px;
}

PHP

public function init()
{
    parent::init(); // TODO: Change the autogenerated stub
    if(Yii::$app->user->id)
    {
        $this->redirect(Url::home());
    }
}

二、下载 Prism.js

Prism.js 支持很多种语言和插件主题。把一些不必要支持的语言包下载下来,会加大库文件大小,拖累我们网站加载速度。所以 Prism.js 采用自定义下载,原版 Prism.js 下载地址:点击链接

我们勾选上我们需要的语言选项,在最下方的Plugins选项中,有一个Line Numbers还是非常值得下载的,可以在代码前显示行号,点击最下方的下载css和js下载文件。

三、使用方法

使用非常简单,首先引入刚刚下载好的2个文件

<!DOCTYPE html>
<html>
<head>
    ...
    <link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
    ...
    <script src="prism.js"></script>
</body>
</html>

wordpress 用户只需要在主题根目录 functions.php 添加如下代码即可,请注意 assets 路径

# 添加代码高亮
function add_prism() {
         wp_register_style(
            'PrismCSS',
            get_stylesheet_directory_uri() . '/assets/css/prism.css'
         );
         wp_register_script(
            'PrismJS',
            get_stylesheet_directory_uri() . '/assets/js/prism.js'
         );
          /*wp_register_script(
            'pure',
            get_stylesheet_directory_uri() . '/assets/js/pure-highlight.js'
         );*/
        wp_enqueue_style('PrismCSS');
        wp_enqueue_script('PrismJS');
        //wp_enqueue_script('pure');
    }
add_action('wp_enqueue_scripts', 'add_prism');

将代码使用如下标签包裹起来

<pre class="highlight"><code class="language-php line-numbers"></code>

请一秒记住我们的网址:www.xinfangs.com !

去投稿去留言