Mobile Featured Image Bug

时间:2016-12-16 作者:Sal

我有个奇怪的问题my site that\'s only affecting mobile. 如果你向下滚动到黑色的“热门内容”部分,你会看到带有特色图片的标准帖子。现在,如果刷新页面,“热门内容”部分之后的标准帖子将丢失特色图片。apache或wordpress日志中没有显示任何内容,如果您在私人会话中浏览,则会显示特色图像。这让我相信这是一个缓存问题,但我不知道如何从那里开始。

另一方面,当我切换到HTTPS时,我真的注意到了这一点,我正在提供混合内容(通过http提供图像,通过HTTPS提供其他所有性能)。以下是我的重写规则。htaccess(我刚刚从教程中摘取):

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress
我已经证实,这影响了一些设备上的Android 6.0.1,以及iPhone的一些变体。在这一点上,我真的不知道如何继续。

3 个回复
最合适的回答,由SO网友:Tunji 整理而成

enter image description here

未加载的图像以域为前缀https://i2.wp.com 这是CDN 激活时使用PHOTON moduleJetpack Plugin.如果停用PHOTON module 或停用Jetpack Plugin, 你应该摆脱这个问题。

SO网友:bueltge

对于视图屏幕,您加载的图像总是太大,例如此图像-https://meta-game.org/wp-content/uploads/2016/12/league_of_legends_world_championship_2015.0.0.jpg, 1600 x 900像素。作为移动视图的替代,此图像定义为-https://i2.wp.com/meta-game.org/wp-content/uploads/bfi_thumb/dummy-transparent-n019axwscfu441qfxjqwpodrdle9kgsyvjjtwpvhgo.png?zoom=2&resize=288%2C162, 但这是一个透明的假人。

您应该使用较小尺寸的缩略图来快速加载。更改主题源以加载每个图像的缩略图。也许你在functions.php 你的主题,一个设置选项或许多其他机会为这个定义。要分析这一点,请在桌面上的浏览器中使用Webinspector,如下面的Chrome屏幕截图。enter image description here

还有提示。问题是要本地化,没有代码是不可能真正解决这个问题的。也许你应该让开发人员,这个团队的支持团队来解决这个问题

SO网友:Adriano Monecchi

我访问了您的网站,您的帖子特色图片似乎没有问题,这让我觉得您可能已经解决了问题,或者只是您提到的缓存问题。

WordPress HTTPS强制所有页面使用HTTPS,以确保加载所有其他页面https, 确保在下更改网站和主页URLSettings >> General 在WordPress管理中。使其可读https://元游戏。组织-然后保存更改。

enter image description here

此外,如果您正在寻找一种简单的方法来保护WordPress登录(wp-login.php脚本)或整个wp admin区域,您可以在wp-config.php:

define(\'FORCE_SSL_ADMIN\', true);

<检查混合内容源,了解从httphttps 协议,我建议你检查你的主题模板,甚至插件,搜索任何硬编码的东西http 然后修复它。

当开发人员意识到这一点时,这应该不是一个问题,但有时会出现一些主题http协议在其模板中硬编码,我知道这是一个糟糕的做法,但我们必须以某种方式修复它。

一种非常简单的检查方法是通过HTTPS加载页面,然后右键单击页面上的任意位置,然后根据您的浏览器单击“查看页面源”、“查看源”或“源”。

然后使用“查找”命令,Edit -> Find(Ctrl+F or Cmd+F) 并搜索:

src="http:(带双引号)

src=\'http:(带单引号)

长话短说,您正在手动查找通过HTTP而不是HTTPS提供服务的图像、脚本、iFrame和所有其他资产。

记下通过HTTP获取的每个项目,您就会知道在哪里可以找到问题。

关于使用相对URL修复混合内容的想法这是最简单的修复方法。如果资源(图像、脚本等)硬编码为插件或主题,请将其从http://example.com/assets/logo.png//example.com/assets/logo.png.

通常,当包含来自其他服务器的资产(如Google脚本、API脚本或iFrame)时,这是最有用的。

但是,在执行此操作之前,您需要确保HTTPS版本可用。如果从未启用HTTPS的站点加载资产,最好完全删除引用(即注释掉或删除),或者将资产保存到您自己的服务器上,并将源更改为通过您的站点加载。

使用适当的WordPress编码标准一个很好的方法是使用WP功能is_ssl() 根据网站使用的协议,有条件地在模板中加载资产,例如:

$protocol = is_ssl() ? \'https:\' : \'http:\';

使用上述方法将外部内容排入队列:

Instead of manually setting the protocol...

wp_enqueue_script(\'bootstrapjs\', \'https://cdn.jsdelivr.net/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js\', \'false\', null, TRUE);

Let\'s do it dynamically

wp_enqueue_script(\'bootstrapjs\', $protocol.\'//cdn.jsdelivr.net/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js\', \'false\', null, TRUE);

确保您的网站不提供混合内容,为访问者提供愉快的浏览体验,这里描述的方法应该可以帮助您在使用ssl时保持网站正常运行。

相关推荐

Images getting smashed

我正在开发一个网站,我遇到了一个关于图像和图库的问题。每当你进入页面时,图像都会被破坏,一旦你刷新几次,它就会被修复,但第一次进入页面时,它看起来是这样的:当它看起来像这样时:这些图像经过的过程是:上传画廊(Gutenberg Block)使用EWW插件进行优化之后,关于图像优化,我激活了PageSpped Ninja、AutoOptimize和Smush插件。我已尝试禁用所有这些功能,但问题仍然存在,我希望您能帮助我解决这个问题。谢谢:D