如何使用 WordPress 轻松放大图像效果

随着设备屏幕变小,使访问者能够轻松放大图像比以往任何时候都更加重要。 您可以使用图像放大镜“放大”图像的特定区域。 图像的其余部分将保持其原始大小,并且仅放大目标区域。

放大图像所需的技术已经存在多年,但实现这种效果既复杂又耗时。 如果你正在寻找一个图像缩放WordPress插件,使它更容易,那么你很幸运。 在这里, 图像悬停效果终极 插件,在几分钟内实现效果。

没有代码,没有大惊小怪,没有大惊小怪! 让我们开始吧。

安装图像悬停效果终极插件

登录到 WordPress 管理面板。

在左侧列导航中,单击[プラグイン]将鼠标悬停在链接上,然后单击[新規追加]单击链接。

在“搜索插件…”框中键入“图像悬停效果的终极”。

文字新闻图像悬停效果终极插件搜索

找到插件后,单击“立即安装”按钮。

点击安装WordPress图像悬停效果终极插件

最后,单击“激活”按钮。

点击启用WordPress图像悬停效果终极插件

使用终极图像悬停效果放大图像

插件的工作方式是创建图像放大镜“样式”。 样式控制图像缩放的工作原理和其他设置选项。 您可以将多个图像添加到样式中。 特定样式的所有图像都显示在页面或帖子的列中。

此部分稍长一些,因为设置用于放大图像的样式有八个步骤。 我编号的步骤,以便您可以一起遵循随着时间的推移。

1. 访问图像悬停

在左侧列导航中,单击[画像ホバー]将鼠标悬停在链接上,然后单击[画像ホバー]单击链接。

["画像ホバー" リンク

2. 画像拡大鏡を使用する

「画像拡大鏡」タイルをクリックします。

["画像拡大鏡" 瓦

画像を拡大するための3つのオプションが表示されます。1 つは拡大された画像を右に表示し、もう 1 つは左側に表示し、もう 1 つは元の画像の上に画像の拡大部分を表示します。

デモ画像にカーソルを合わせて、使用するオプションを選択します。

デモ画像にカーソルを合わせると効果が表示されます

3. 新しいスタイルを作成する

「スタイルを作成」ボタンをクリックします。

["スタイルの作成" ボタン

「新しい画像ホバー」ポップアップが開きます。

4. スタイルに名前を付けて保存する

「名前」フィールドにスタイルに名前を付けます。

「レイアウト」ボタンから必要な倍率スタイルを選択します。(1 番目は右に拡大し、2 番目は画像の上に拡大し、3 番目は左に拡大します。

「保存」ボタンをクリックしてください。

["セーブ" ボタン

設定ページが開きます。

5. フォームを開く

「拡大鏡フォームを開く」タイルをクリックします。

["拡大鏡フォームを開く" 瓦

「画像ホバーフォーム」ポップアップが開きます。

6. イメージライブラリを開く

[メディアタイプ]在“”部分中,您可以选择从媒体库中选择图片或选择 URL。 在本演示中,您将从媒体库中选择现有图像。

[画像]在“”部分中,将鼠标悬停在标题上,然后单击[画像の選択]单击链接。

["画像を選択" リンク

7. 画像を選択する

メディアライブラリが開きます。倍率を追加したい画像をクリックし、「画像を選択」ボタンをクリックします。

["画像を選択" ボタン

8. 微調整と送信

これで、「イメージホバーフォーム」ポップアップに戻ります。メディアライブラリから選択した画像がプレビューペインに表示されます。

拡大鏡を画像の上に配置したいので、「マグニフィ位置」を「なし」に設定します。(なぜ設定が “トップ”ではなく “None”なのかはわかりませんが、そうです。

「正しい位置」の設定はそのままにしておきます。これは、倍率が片側に設定されている場合に拡大画像が表示される場所に影響します。画像を横に拡大しないので、それは「0」にとどまるべきです。

「送信」ボタンをクリックしてください。

["送信" ボタン

ページまたは投稿への拡大画像の追加

さて、スタイルを作成し、画像を追加しました。次に、ページまたは投稿に画像を挿入しましょう。

スタイル編集ページはまだ表示されており、画像を追加したタイルの下には「ショートコード」セクションがあります。この例では、ショートコードは次のようになります。 [iheu_ultimate_oxi id=”1″].

复制短代码。

复制短代码

打开页面或帖子并插入短代码块。

将放大镜的短代码粘贴到块中。 如果您使用的是经典的 WordPress 编辑器,只需将短代码粘贴到页面上,就像粘贴文本一样。

将放大镜的短代码粘贴到块中

单击“刷新”按钮以保存页面。

现在,当您查看页面时,图像将显示在插入短代码的位置。 将鼠标悬停在图像上可查看放大效果。

将鼠标悬停在图像上以查看放大倍数。

静止图像的悬停效果无法真正证明放大图像有效。 😉

向样式添加其他图像以放大多个图像

在左侧列导航中,单击[画像ホバー]将鼠标悬停在链接上,然后单击[ショートコード]单击链接。

["ショートコード" リンク

このページには、スタイルのリストが含まれています。

「名前」列には、スタイルを設定したときにスタイルに付けた名前「ImageMag」が表示されます。ショートコードはこのページからコピーすることもできます。上級ユーザーがテンプレートにスタイルを挿入できるようにするPHPコードもあります。

「編集」ボタンをクリックしてください。

["編集" ボタン

これで、おなじみの編集ページに戻ります。

2 つ目の画像を追加するには、[新しい拡大鏡の追加]将鼠标悬停在节的加号 (+) 图标上。 重复上述步骤 5 到 8 以添加图像。

将鼠标悬停在加号上

添加第二个图像后,[プレビュー]向下滚动到该部分。 第二个图像将显示在创建样式时添加的第一个图像下方。

在预览中添加的图像

当您转到添加短代码的页面时,您将看到两个图像。

页面上的两张图片

插件做的不仅仅是在文字新闻中放大图像。

您可能在插件的“图像效果”部分看到,它不仅仅是缩放和放大。

工具顶部有许多图像鼠标,其中大多数包含标题。 有一个按钮动画,有我最喜欢的“图像比较”功能。 请帮自己一个忙,看看插件还能做些什么。

卸载图像悬停效果终极插件时会发生什么情况?

卸载插件时,使用该插件的页面和帖子将受到影响。

  • 您创建的样式将被删除。
  • 由于插件的短代码不再工作,因此短代码本身将显示在使用的位置。

主题兼容性

我应该告诉你,我遇到了一个主题兼容性问题与这个插件。 考虑到一个月前更新了它,这很奇怪。

对于我所做的每个教程,我将从新版本的 WordPress 安装开始。 这包括最新的默认 WordPress 主题(本图为 20 Twenty)。

放大效果不适用于“Twenty”。 或者,以前的默认主题是“主题尼内特”。 我不得不回到特温蒂·塞文滕的主题,使其工作(没有主题情)。

这并不意味着你的主题不工作。

但是,当您测试插件时,它仅限于 WordPress 安装附带的主题。 所以,我让你知道它是如何在这些主题工作。

他们说眼睛是通往灵魂的窗户。

我不知道这是否是真的,但可以肯定的是,我们是视觉生物。 自从我们第一版的Mosaic浏览器以来,我们一直在网络上使用图像(询问我们的祖父母)。

任何可以增强图片演示文稿的内容都有助于留住访问者。 因此,随着许多访问者迁移到小屏幕,使查看图像详细信息变得更加容易是一个好处。 我今天在这里谈到的图像放大镜将做更多的事情。

您是否在网站上使用了旧的手动图像放大镜版本? 你认为这样的WordPress插件会鼓励你更频繁地使用放大倍率吗? 请在评论中告诉我们。

给TA打赏
共{{data.count}}人
人已打赏
WordPress 教程

如何将比特币作为支付网关添加到 WordPress

2022-9-9 6:17:40

WordPress 教程

如何创建书籍博客与这些简单的步骤

2022-9-9 8:19:57

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索