ホームページ > CMS チュートリアル > &#&プレス > WordPress テーマを最適化するにはどうすればよいですか?改善のための10のヒント

WordPress テーマを最適化するにはどうすればよいですか?改善のための10のヒント

青灯夜游
リリース: 2023-03-16 20:20:01
転載
1726 人が閲覧しました

WordPress テーマを最適化するにはどうすればよいですか?次の記事では、WordPress テーマを改善するための 10 のヒントを紹介します。

WordPress テーマを最適化するにはどうすればよいですか?改善のための10のヒント

現在、多くの友人が WordPress を使用してブログを構築しています。 WordPress をインストールした後、多くの新規ユーザーは非常にカスタマイズされたテーマをオンラインで検索してダウンロードしようとしますが、WordPress のデフォルトのテーマを使用するユーザーはほとんどいません。実際、使用している WordPress テーマが有料か無料かに関係なく、改善が必要な領域はまだたくさんあります。次の WordPress テーマの提案では、基本的なカスタマイズのヒント、スタイル設定、最適化方法について説明します

1. 画像サイズの削減

すべての WordPress テーマにおいて、画像はすべて重要な役割を果たします, しかし残念なことに、多くのテーマ開発者はそれらを最適化することを忘れています。画像には、CSS 背景画像、テンプレート ロゴ、デフォルト画像、小さなアイコンなどが含まれます。

画像を最適化すると、帯域幅の消費量が節約され、ブログ読者のページの応答時間が短縮されます。 PhotoShop CS3を例に挙げると、メニューバーの「ファイル」→「Webとデバイス用に保存」で写真をWeb用に最適化できます。通常、私が行うのは、色や品質に顕著な変化が見られるまで画像の品質を下げ続けることです。

さらに、Smush.it のような可逆画像最適化ツールを使用することもできます。このツールは、画質を確保しながら画像サイズを圧縮できます。使用方法は 2 つあります:

  • 「UPLOADER」→「ファイルを選択してスマッシュ」の順にクリックし、圧縮したいローカル画像を選択し、最後に圧縮結果の画像名をクリックしてダウンロードします
  • 「URL」をクリックし、入力します画像の URL アドレスを入力し、「圧縮開始」を送信します。

WordPress テーマを最適化するにはどうすればよいですか?改善のための10のヒント

2. パーソナライズされたファビコンを使用します。

一部の WordPress テーマには、デフォルトのファビコンが付属していません (アイコンは Web サイトをマークでき、ブラウザーのタブとブラウザーの URL バーに表示されます)。次の図は、このブログで使用されているファビコン アイコンを表しています。

WordPress テーマを最適化するにはどうすればよいですか?改善のための10のヒント

Web サイトにファビコン アイコンがないと、プロフェッショナルではない印象を与えてしまいます。このため、WordPress テーマにファビコン アイコンが含まれていることを確認してください。ファビコンアイコン。ファビコン アイコンの設定は実際には非常に簡単で、favicon.ico アイコン ファイルを Web サイトのルート ディレクトリにアップロードするだけです。ホストがこのメソッドをサポートしていない場合は、WordPress テーマでこのメソッドを参照することもできます。テーマ ディレクトリの header.php を開き、 の前に次のコードを追加します (次のコードの favicon.ico を次のように変更することを忘れないでください)あなたのアイコンの URL):

<link rel="icon" href="favicon.ico" type="image/x-icon" />
ログイン後にコピー

3. 様式化された画像の説明

画像をアップロードして記事に挿入するときは、次の項目を追加する必要があります。それを説明するための画像の説明。注: 画像の説明は画像の説明テキストです。WordPress のバックグラウンドで記事を編集すると、画像のアップロード後にいくつかのオプションが表示されます。下の画像の 2 番目のタイトルは画像の説明テキストです:

WordPress テーマを最適化するにはどうすればよいですか?改善のための10のヒント

すべての優れた WordPress テーマには、画像説明のデフォルト スタイルが含まれている必要があります。デフォルトの画像説明のスタイルを設定するには、.wp-caption## をテーマの style.css.# 種類。以下は、画像の説明をスタイル設定するための CSS コードです。(いくつかの CSS 3 プロパティを使用して) 参照できます:

.wp-caption {
  background-color: #f3f3f3;
  border: 1px solid #ddd;
  -khtml-border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px; /* optional rounded corners for browsers that support it */
  margin: 10px;
  padding-top: 4px;
  text-align: center;
}
.wp-caption img {
  border: 0 none;
  margin: 0;
  padding: 0;
}
.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
}
ログイン後にコピー

以下は、上記の CSS コードを使用した後に画像の説明をスタイル設定した結果です:

WordPress テーマを最適化するにはどうすればよいですか?改善のための10のヒント

#4. PHP の Flush

を使用して

flush() 関数を呼び出します。テーマヘッダーに追加すると、WordPress ブログを高速化できます。操作も非常に簡単で、テーマディレクトリ内のheader.phpを開き、</head>の後に次のコードを追加します。<p> 这行代码只是强制服务器在发送其他内容之前,先发送你的网站头(header)。通过使用 <code>flush() 函数,浏览器就可以在等待网页其他内容的时候,下载网页头中引用的所有样式表。

5. 在你的主题样式表中使用CSS简写

WordPress主题CSS文件中给网页的不同部分定义大量的样式代码。为了缩小CSS文件的大小,可以使用CSS简写方式。一些WordPress主题设计者为了方便初学者修改样式而不用CSS简写,但如果你是一位经验丰富的CSS编写者,你可以尝试用CSS简写方式来 写/重写 样式表。

举个例子,如果你在主题中发现类似以下的样式规则:

.post {
  padding-top:3px;
  padding-right:10px;
  padding-bottom:5px;
  padding-left:2px;
}
ログイン後にコピー

你可以将它们缩写至它们的简写形式:

.post { padding: 3px 10px 5px 2px; }
ログイン後にコピー

这将有效地减少您的样式表的大小。两段代码实现效果是完全一样的,但是每一点的优化都会使你的WordPress主题更快。

WordPress テーマを最適化するにはどうすればよいですか?改善のための10のヒント

6. 压缩你的 WordPress 主题文件

以上我们以及通过使用简写来优化了styles.css,但是可能你的CSS和JavaScript文件仍然不是最精简的,你可以再次将它们压缩。通过压缩,可以去除文件中不必要的内容,如空格、制表符、空行等。

要压缩JavaScript,可以使用在线工具 JavaScript Compressor,在第一个输入框中输入js代码,点击Compress JavaScript就可以的压缩后的js的代码。

要压缩CSS,可以使用在线工具 CSS Drive Gallery - CSS Compressor,输入CSS代码,点击Compress-it!即可

如果想直接压缩HTML代码,那将是特别棘手的,因为主题的代码标记可能会散布在多个文件中,而且很多HTML和PHP代码是混合在一起的。不过,也有像W3 Total Cache 这样的缓存插件,它可以压缩前端的所有代码,同时可以执行其他优化操作,如缓存你的博客文章,以改善网站的速度。

7. 主题安全

保护主题安全的的一个简单方法,是去除标签中输出的WordPress版本信息。为什么要去除呢?因为有些恶意用户看到你的WordPress版本后,那他对特定版本的漏洞进行攻击就简单多了。要去除版本信息,你需要采取以下两个步骤。

首先,在主题的header.php中查找是否以下类似代码,如果有的话就将它去除,因为这是用来输出版本号的:

<meta name="generator" content="WordPress <?php bloginfo(’version’); ?>" />
ログイン後にコピー

接着,主题的wp_head()函数可能还会输出WordPress版本号,为了不让它输出,请在主题目录下的 functions.php 中添加以下代码(没有functions.php就新建一个):

<?php remove_action(&#39;wp_head&#39;, &#39;wp_generator&#39;); ?>
ログイン後にコピー

8. 隐藏面板登陆错误信息

另一种保护你的WordPress的主题的方法是隐藏登录错误。这样做的原因是,不管什么时候,你输入正确的用户名,但是输入的是错误的密码,那么系统就会提示:"错误:密码不正确。忘记密码?",这样就是直接暗示恶意用户,这个用户名是正确的,只要不断地尝试其他密码,迟早可以破解处你的登陆密码。

WordPress テーマを最適化するにはどうすればよいですか?改善のための10のヒント

同样,当你输入一个不存在的用户名是,会出现提示"错误:不可用的用户名",同样也可以暗示这个用户名是不可用,再换其他用户名,这样又减少了一种可能。

为了不让这样的问题发生,你需要在 functions.php 文件中添加:

add_filter(&#39;login_errors&#39;, create_function(&#39;$a&#39;, "return null;"));
ログイン後にコピー

这个过滤器可以去除登陆错误时出现标准错误信息。

9. 替换主题自带的搜索功能

你下载到的大多数主题都使用了WordPress核心提供的默认的搜索方法,但是有时候,核心的搜索方法还不如第三方提供的搜索功能强劲,如Google自定义搜索,Yahoo! Search BOSS,Bing API。具体例子,WordPress默认的搜索功能,如果输入的是作者昵称,你将搜索不到任何内容(除非你将作者昵称写到自定义域里面)

WordPress テーマを最適化するにはどうすればよいですか?改善のための10のヒント

另一方面,使用由谷歌,雅虎和微软的Bing提供的搜索功能将不仅利用他们的搜索专长,而且还可以帮助你减少你的搜索服务器负载。

关于WordPress添加Google自定义搜索,你可以使用插件Google Custom Search Plugin,如果你想手动添加搜索代码,你可以自行上网搜索相关教程。

10. 减少函数调用和静态内容钩子

因为主题都是要提供给大多数人用的,所以需要更大的灵活性,为此需要动用大量的函数和钩子来满足这种灵活性。不过,这可能导致较低的性能和网页的速度,因为每一个页面生成的时候,它都需要进行多次函数调用来呈现网页。现在你可以尝试找出不需要的函数调用,并注意一下你的博客中那些已成不变的内容。

例如,在 header.php中你可能会看到以下类似代码:

bloginfo(&#39;name&#39;);
ログイン後にコピー

这个函数输出的是博客名称。您的博客的名字大概不会经常改变,如果这样的话,那么你可以使用你的博客名称直接代替以上代码,这样就可以减少一次函数调用:

echo &#39;露兜博客&#39;;
ログイン後にコピー

以下是另外一个例子(同样在header.php中搜索):

bloginfo(&#39;stylesheet_url&#39;);
ログイン後にコピー

以上代码输出主题的CSS样式文件的URL。因为这样网址几乎是一成不变的,你可以将以上代码替换成主题CSS的URL:

echo &#39;http://example.com/wp-content/themes/themename/style.css&#39;;
ログイン後にコピー

     还有其他类似这样的函数,他们是造成你的博客速度缓慢的一个原因,尤其是在你没有使用缓存插件的情况下。

推荐学习:《WordPress教程

以上がWordPress テーマを最適化するにはどうすればよいですか?改善のための10のヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:ludou.org
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート