专业WORDPRESS主题设计制作

H5网络公司大气自适应模板演示(h5 自适应)

发布于: 2022-09-01
TAG:

the_post_thumbnail()函数和add_image_size()函数(pil image.open()函数参数)

发布于: 2022-08-19

the_post_thumbnail()函数用于获取文章的特色图像缩略图。如果文章没有添加特色图像功能,可以查看add_theme_support()函数文章学习。

语法结构

the_post_thumbnail( string|array $size = 'post-thumbnail', string|array $attr = '' )

参数

$size(string|array) 图片大小,可以是以下几个关键字:thumbnail, medium, large, full。或者通过函数 add_image_size()函数定义尺寸的关键字。或者自定义宽和高的大小,比如:(32,32)。默认值是 ‘post-thumbnail’。

$attr(string|array)属性/值的一个数组,比如设置默认的class属性

实例

直接使用
if(has_post_thumbnail()){
    the_post_thumbnail();
}

自定义缩略图的大小
if(has_post_thumbnail()){ 
    the_post_thumbnail(array(200,200)); // 显示200X200尺寸的缩略图 
}
这种方法的优点的灵活,可以随时通过代码的调用显示不同尺寸的图片,缺点是如果有多处代码则修改起来麻烦

预置尺寸
用到此方法请先看下面的函数介绍

add_image_size()函数是设置 WordPress 中上传图片缩略图大小的一个函数

语法结构

add_image_size( string $name, int $width, int $height, bool|array $crop = false )

参数

$name,要设置的缩略图名称,可接受thumbnail, medium, large, full等
$width, 设定的最大宽度
$height, 设定的最大高度
$crop,是否切割,如果设置为true则按照图片剪裁自定义的高度和宽度对图片进行剪裁,100%得到预设的图片尺寸,不会压缩图片的宽高比,但是会在原图的基础上进行裁剪,同时不能控制图片剪裁的起始点。false按照图片的原始长宽比进行剪裁,不会缺失图片的内容

TIPS

the_post_thumbnail()函数和add_image_size()函数
  1. 使用WordPress的内置函数add_image_size()函数设置自定义图片剪裁,只会影响到今后新上传的图片,而不会对已有图片有影响。
  2. 尽可能少的去使用add_image_size(),应为每一次上传图片之后,无论是否需要,系统都会自动的按照add_image_size()函数设置进行剪裁,有可能造成大量无用图片占据网站空间;
  3. add_image_size()函数生成的图片仅能够在主题模版中使用,在编辑文章页内容时不能被使用。

实例

比如我们想在首页和分类页面使用不同的缩略图大小,就可以先预置homepage-thumb和category-thumb这两大小。方法是在functions.php文件中加入以下代码

if ( function_exists( 'add_image_size' ) ){  
    add_image_size( 'category-thumb', 200, 200 ); // 预置一个名为’category-thumb’,200*200的缩略图大小  
    add_image_size( 'homepage-thumb', 220, 180); //预置一个名为’homepage-thumb’,220*180的缩略图大小  
}

在首页调用
the_post_thumbnail(‘homepage-thumb’); //显示220*180的缩略图
在分类页面调用
the_post_thumbnail(‘category-thumb’); //显示200*180的缩略图

the_post_thumbnail函数输出的html结构

<img width="150" height="150" src="/uploads/img/" class="attachment-thumbnail wp-post-image" alt="" title="screenshot" />

由此可以看出,我们可以用css定义类attachment-thumbnail的样式就可以了。但是如果我想分别为首页和分类页面定义不同的样式,该怎么做呢?可以给缩略图添加一个属性,如

the_post_thumbnail(‘thumbnail’,array(‘class’ => ‘homepage-thumb’));
输出的html结构为
<img width="150" height="150" src="/uploads/img/" 
class="homepage-thumb wp-post-image" alt="" title="screenshot" />

感兴趣的朋友可以多多测试不同的方式,这篇文章就写到这里。

WordPress如何制作超级菜单模板?使用Mega Menu插件(wordpress自定义菜单样式)

发布于: 2022-11-03

1 WordPress如何制作超级菜单模板?

Mega Menu是一个可以个性化的超级导航栏,可以添加图片、视频等丰富的元素。 如果卖家网站页面多、产品多、品类多,可以升级卖家普通菜单,使用超级菜单Mega Menu。

131152451

WordPress如何制作超级菜单模板?

我们可以用Elementor 编辑器的 ElementsKit 插件。

  1. 首先,在卖家的WordPress后台安装插件ElementsKit。
  2. 安装激活后,在WordPress后台左侧功能栏可以看到Elementor Kit,就可以使用ElementsKit了。
  3. 进入ElementsKit后台,勾选Modules中的Mega Menu,确保可以使用Mega Menu功能。

制作WordPress超级菜单

  1. 点击WordPress后台的外观,找到Menu,创建卖家网站菜单。
  2. 然后勾选为 Megamenu 内容启用此菜单。

Elementor Kit 编辑 Mega Menu

  1. 编辑 Menu 时,点击 Mega Menu 即可使用 ElementsKit 的 Mega Menu 功能。
  2. 点击 Megamenu Enabled;
  3. 然后点击 Edit Megamenu Content 开始编辑 Mega Menu;
  4. 进入 Elementor 编辑器界面点击 ElementsKit 图标开始编辑。
  5. 选择Mega Menu,选择卖家喜欢的样式。
  6. 然后开始编辑,你可以根据自己的实际情况,进行编辑和制作超级菜单。
  • 在这个过程中,卖家需要进行一系列的设置,可以根据卖家自己的需要进行设置。
  • 操作编辑后,记得保存。

导入Mega Menu

  1. 开始使用Elementor将创建的Mega Menu添加到卖家网站;
  2. 回到首页,点击Edit with Elementor开始制作;
  3. 点击+号开始;
  4. 添加 ElementsKit Nav Menu模块;
  5. 点击Select Menu选择卖家的菜单,之前制作的Mega Menu会自动导入。
  6. 这时候卖家也可以编辑的Mega Menu超级菜单样式、颜色等……
  7. 进行一系列的调试,直到卖家满意为止。

以上就是关于Mega Menu使用的相关内容,希望对你有所帮助。

希望我们网站( https://www.wordpressx.com/ ) 分享的《WordPress如何制作超级菜单模板?使用Mega Menu插件》,对您有帮助。

解决无需升级,您的WordPress数据库已经是最新的了!(wordpress优化版)

发布于: 2022-11-03

1 1)哪里出问题?

  • 2 2)如何解决?
  • 3 如何找到和解决问题?
    • 3.1 注意事项

 

在线升级到WordPress最新版本登录后台时,出现提示:

  • “无需升级,你的WordPress数据库已经是最新的了” ▼

no-need-upgrade-your-wordpress

  • 单击继续会转到首页,并发生无限死循环,导致站点无法登录……

解决方案如下:;

1)哪里出问题?

大多数出现此现象的用户,都启用了object缓存,或Memcached缓存。

wp-content文件夹中有一个object-cache.php文件,这是导致你无法登录缓存的主要原因。

2)如何解决?

第 1 步:删除或重命名object-cache.php文件

  • 我们只需要进入wp-content文件夹,来删除object-cache.php文件。
  • 或者更改后缀名称,例如:object-cache.php.bak

第 2 步:登录后台

然后再次登录后台,就不会出现无限循环。

如何找到和解决问题?

这类问题通常是由WordPress建站程序的缓存引起的:

  • 你还记得你的WordPress程序,是否安装了一些缓存插件?
  • 然后转到FTP,直接更改缓存插件名称,或删除所有生成的缓存缓存文件夹(如窗口小部件缓存,对象缓存,WP缓存,WP插件缓存等)

注意事项

  • 多数缓存文件位于plugins文件夹中。
  • 某些插件缓存文件位于wp-content目录中,或你未注意到的其它位置。
  • 更改完成后,就能如常登录WordPress后台了。

希望我们网站( https://www.wordpressx.com/ ) 分享的《解决无需升级,您的WordPress数据库已经是最新的了!》,对您有帮助。

TAG:

如何添加WordPress小工具?主题集成Widgets区域(wordpress小工具插件)

发布于: 2022-11-03

1 第一步、小工具注册

  • 2 第二步、小工具调用
  • 3 第三步、设置小工具
  • 4 如何在不同区域,添加多个WordPress小工具?
  • 5 WordPress主题集成小工具widget技巧

 

自定义菜单功能和侧边栏小工具,是WordPress主题中比较有特色的功能.

  • 制作一个主题,如果不包含这两个功能,就像鸡肋一样……

我们在之前的建站教程里,分享了如何给WordPress主题添加自定义菜单。

本文介绍一下制作主题的时候,如何添加自定义小工具功能。

和给主题一样添加自定义菜单一样,自定义添加小工具Widgets只需3个步骤。

第一步、小工具注册

要使用小工具,先要进行注册,打开WordPress主题下面的 functions.php 文件,

在functions.php文件里面,添加如下代码:

<?php

//侧边栏小工具
if ( function_exists('register_sidebar') ) {
    register_sidebar( array(
        'name' => __( 'Top Sidebar' ),
        'id' => 'top-sidebar',
        'description' => __( 'The top sidebar' ),
        'before_widget' => '<li>',
        'after_widget' => '</li>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ) );
}

?>

 

修改functions.php里的li、h2标签,使之对应sidebar.php里的标签:

‘before_widget’ 和 ‘after_widget’ 的li和模块h2标题,按实际情况修改代码。

(也可能不用修改)

        'before_widget' => '<li>',
        'after_widget' => '</li>',

        'before_title' => '<h2>',
        'after_title' => '</h2>',

以上代码注册了一个名为“top-sidebar”的小工具区域:

  • 显示的名称是“Top Sidebar”。
  • 标题加上 h2 标签。
  • 内容条目加上 li 标签。

登录WordPress后台仪表盘,依次进入 外观 → 小工具。

如果能看到下图中右边的Top Sidebar  小工具区域,说明注册成功了 ▼

wordpress-add-widgets_1

第二步、小工具调用

小工具注册之后就可以在主题模板文件中调用了,把下面的代码放到sidebar.php文件中就可以调用了。

1)在sidebar.php文件中,最大的li或div标签下方,插入 ▼

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(top-sidebar) ) : ?>

2)在sidebar.php文件中,最大的</li>或</div>上方,添加 ▼

<?php endif; ?>

第三步、设置小工具

1)小工具注册好了,显示位置也在主题文件中定义好了。

  • 就可以在WordPress后台对小工具组区域进行设置了 ▼

wordpress-add-widgets_2

2)保存之后,刷新前台页面。

  • 我们的网站侧边栏,就会变成下图这个样子 ▼

wordpress-add-widgets_3

能看到上图,说明我们的小工具已经制作完成,并如常运行了。

如何在不同区域,添加多个WordPress小工具?

重复第一步和第二步,就能让你的WordPress主题,支持不同位置中的widget小工具了。

假设你需要将一个小工具添加到主题的头部、侧边栏、和底部。

1)首先,你需要将以下代码复制到functions.php文件中 ▼

if (function_exists('register_sidebar')) {

register_sidebar(array(
'name' => 'Header',
'id' => 'header',
'description' => 'This is the widgetized header.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' => 'Sidebar',
'id' => 'sidebar',
'description' => 'This is the widgetized sidebar.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' => 'Footer',
'id' => 'footer',
'description' => 'This is the widgetized footer.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));

}

2)接下来,将以下代码分别添加到header.php、sidebar.php和footer.php文件中。

header.php ▼

<div id="widgetized-header">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('header')) : else : ?>

<div>
<p><strong>Widgetized Header</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

sidebar.php ▼

<div id="widgetized-sidebar">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar')) : else : ?>

<div>
<p><strong>Widgetized Sidebar</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

footer.php ▼

<div id="widgetized-footer">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('footer')) : else : ?>

<div>
<p><strong>Widgetized Footer</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

到此成功!

  • 当然,你也可以根据需要修改代码里的各种细节 ^_^
  • 上面的2个步骤,允许主题的其余部分集成小工具的功能。

接下来,继续分享WordPress使用小工具widget的技巧。

WordPress主题集成小工具widget技巧

高效管理自定义widget小工具:

1)向主题添加widget小工具后,你可以创建一个单独的文件,并将其命名为widgets.php

  • 以便将所有在第1步添加的自定义widget小工具代码,保存到此文件夹。

2)将代码添加到functions.php文件中:

if ($wp_version >= 2.8) require_once(TEMPLATEPATH.’/widgets.php’);

3)将所有在第1步添加的自定义widgets小工具代码,保存到widgets.php文件里。

此方法可确保所有widgets小工具顺畅加载,并在所有支持widgets小工具的WordPress版本上运行。

这样,你就可以更高效率地管理的WordPress主题文件。

希望我们网站( https://www.wordpressx.com/ ) 分享的《如何添加WordPress小工具?主题集成Widgets区域》,对您有帮助。

TAG列表 wordpress最新最热TG汇集,掌握wordpress热线内容
wordpress博客如何使用wordpress cdnwp-json优化WP SMTP插件WordPress过滤敏感词插件wordpress如何制作单页WordPress自动备份Image Sizes插件WordPress自定义页眉WordPress站内搜索排除某些类别的文章robots.txt禁止访问xmlrpc.php攻击WordPress违禁词检查修改wordpress登录地址Pretty Links Pro插件Better Search Replace插件WP插件优化head代码Mega Menu插件WordPress官网制作谷歌 SEOwordpress Post ViewsJetpack插件隐藏WordPress代码内版本号Shortcodes Ultimatewordpress安全防护WP-No-Tag-Base插件wordpress漏洞修复wordpress表单跳转WP安全登录插件推荐扒站怎么改wordpress主题WordPress打开界面Markdown here插件主机壳Wordpresswordpress小图标不显示WordPress广告词检测安装WordPress插件WordPress菜单自定义图标隐藏WordPress后台登录地址WordPress虚拟主机伪静态All In One WP Securityhttp://www.fandutaoci.cnwp-json防止数据被采集织梦采集侠wordpresswp-json漏洞保护robots.txtWordPress调试模式wordpress文章浏览数量统计Rich Snippets结构化数据WordPress文章描文本WordPress网站安全防WordPress tag模版wordpress描文本Avada主题演示bootstrap自适应布局Easy WP Cleaner插件Footer and Post Injections插件Avada主题wp-json安全设置Dropbox上传失败Wordfence Security插件Jetpack站点加速器CDN图像缓存wordpress常规设置h5自适应布局WordPress外链特色图片WordPress网站恶意代码wordpress打开是代码CWP开启Redis缓存WP SMTP插件设置namechep域名优惠码WordPress网站防护wp-json链接WordPress显示运行数据库BackWPup插件xmlrpc.php漏洞CWP控制面板转KLOXO-MRWordPress页脚页眉插件nameCheap最新优惠码wordpress代码在线运行WordPress大气的样式去除tag标签urlWordPress tagWordPress超级菜单Redis加速缓存插件Awesome Supportwordpress文章卡片样式wordpress感谢页面critical automatic updates网站添加CDNrobots.txt安全设置怎么制作wordpress模板WordPress页脚加载JSFeatured Image From URLWordPress站内搜索排除所有页面wordpress Dropboxnamechep续费优惠码禁用 xmlrpc.phpWordPress滤敏感词过滤插件百度熊掌号wordpress更换域名图标不显示Shortcodes Ultimate插件
服务电话:
0533-2765967

微信 13280692153