怎样给wordpress文章编辑器添加分页按钮

怎样给wordpress文章编辑器添加分页按钮,第1张

1、首先给WordPress文章编辑器添加显示分页按钮,默认没有添加,并没有看到该按钮,如下图所示

2、修改 /wp-includes 目录下的 class-wp-editor.php 文件,在标签'wp_more',后面添加以下代码'wp_page',即可。

3、此时,你就可以在后台写文章及编辑文章页面的文本编辑器上看到一个跟 more 标签按钮相似的图标,这个便是插入分页的按钮。

4、然后再你的一篇长篇文章中,某个段落之前插入一个分页符,即把光标定位到要分页的位置,然后点击下分页按钮,就会自动插入一个分页符。

5、在主题模板文件 single.php 中找到类似下面这行代码。

<?php the_content()?>

在这行代码后面添加如下所示的代码,即可实现简单的分页功能。

</br><?php wp_link_pages(array('before' =>'<div class="fenye">文章分页:', 'after' =>'', 'next_or_number' =>'next', 'previouspagelink' =>'上一页', 'nextpagelink' =>""))?>

<?php wp_link_pages(array('before' =>'', 'after' =>'', 'next_or_number' =>'number', 'link_before' =>'<span>', 'link_after'=>'</span>'))?>

<?php wp_link_pages(array('before' =>'', 'after' =>'</div>', 'next_or_number' =>'next', 'previouspagelink' =>'', 'nextpagelink' =>"下一页"))?>

7、最后,添加这个分页的一些样式,在主题模板文件中的style.css文件最后添加如下样式:

/*文章分页*/

.fenye{text-align:centermargin:0px auto 10px}

.fenye span{background-color:#C73503color:#ffffont-weight: boldmargin:0px 1pxpadding:3px 6pxtext-decoration:noneborder:1px solid #D2D2D2}

.fenye a{text-decoration:none}

.fenye a span{background-color:#F6F6E8font-weight: normalcolor: #000text-decoration: none}

.fenye a:hover span{background-color:#c73503color: #fff}

必须调出“分页”工具栏,通过“插入”按钮来插入分页符,或者使用组合键“Ctrl+Enter”来实现。

1. 单击“开始”,在菜单中选择“查看”;

2. 在d出的子菜单中找到“工具栏”,在其中选择“分页”;

3. 单击“插入”按钮,或者使用组合键“Ctrl+Enter”,即可在当前位置插入分页符。

这个是我自己写的一个实例,实现了你说的那个功能,看一下吧

var pbbr = new Ext.PagingToolbar({// 分页

pageSize : pagesize(),

store : propertyStore,

displayInfo : true,

displayMsg : '第 {0} 条到 {1} 条,一共 {2} 条',

emptyMsg : "没有记录",

items : [ '-', '每页', cmPageSize, '条' ]

})

cmPageSize.on("select", function(comboBox) {

pbbr.pageSize = parseInt(cmPageSize.getValue())

// alert(parseInt(cmPageSize.getValue()))

cp.set('pagesize', pbbr.pageSize)// 放置cookie

// Ext.Msg.alert('消息',cp.get('pagesize'))

Store.reload({

params : {

start : 0,

limit : pbbr.pageSize

}

})

})


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11572120.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-17
下一篇2023-05-17

发表评论

登录后才能评论

评论列表(0条)

    保存