プラグインによるWordPressタグクラウドの改善。 WordPressブログでクラウドにラベルを付けるWordpress投稿をクラウドとして表示する

多くのリソースでは、タグは、よくあることですが、空のスペースや美しさを埋めるためだけでなく、直接的な目的のためにも表示されます。資料は特定の単語でグループ化されているため、必要な情報を簡単に見つけることができます。または、標準の見出しをタグによる並べ替えに置き換えても、これは大規模なポータルに適用されます。

今日は、サイトの別のページにタグクラウドを表示し、標準のウィジェットを使用して、各タグに異なるリンクまたは背景色を設定する1つの方法を見ていきます。その結果、色付きのタグクラウドが得られ、これに通常のタグの出力を投稿の最後に追加します。

このトピックに関する公式リポジトリには多くのプラグインがありますが、特別なプラグインは使用しません。たとえば、古くてよく知られているモジュールの場合です。いくつかの機能を使用して、いわば手動モードですべてのアクションを実行します。

別のページでクラウドにタグを付ける

実装するには、不要な関数を削除し、適切な場所に独自の関数を追加する必要があります。説明のテンプレートに関する詳細はスキップします。要点のみに触れます（他のすべては上記のリンクにあります）。

標準のpage.phpファイルを複製し、tags.phpとして保存し、ファイルの先頭にコメントを追加します。

/ *テンプレート名：タグクラウド* /

このファイル内で、不要な機能（サイクル、ナビゲーション、コメントフォーム、その他必要のないものすべて）を削除します。アイデアによると、コンテンツの正確さを維持するヘッダー、サイドバー、フッター、およびブロックが必要です。

これに置き換えましょう：

関数.phpファイルに次のコードを書き込む必要があります。

| i "、" colorCloudCallback "、$ text）; return $ text;）function colorCloudCallback（$ matches）（$ text = $matches;#Tag背景色$colors= array（" F99 "、" C9C "、" F96 " 、"6CC"、 "6C9"、 "37A7FF"、 "B0D686"、 "E6CC6E"）; $ color = $ songs; $ pattern = "/ style =（\" | \ "）（。*）（\" | \ "）/ i"; #Tag styles $ text = preg_replace（$ pattern、 "style = \" display：inline-block; * display：inline; *zoom：1; color：#fff; text-shadow：1px 1px 1px＃989898;パディング：1px 5px;マージン：0 5px 5px 0;背景色：＃（$ color）; border-radius：2px; text-decoration：none！important; -webkit-transition：background-color .4s線形;-moz-遷移：背景色.4s線形;遷移：背景色.4s線形; \ ""、$ text）; $ pattern = "/style=(\"|\")(.*)( \ "| \"）/ i "; return"

ラベルにランダムな（ランダムな）背景色を追加します。

結果。

サイドバーの色付きタグクラウド

サイドバーに通常のタグクラウドを表示するには、標準のウィジェットを使用するだけで十分です。これは、WordPressサイトにネイティブに存在し、「 外観-ウィジェット"。ただし、理由は不明ですが、これが誰かに合わない場合は、wp_tag_cloud関数を使用することもできます。最初にのみ、次のコードをその中に入れます。

そして最後のアクションで、functions.phpファイルに次のコードを追加します。

関数colorCloud（$ text）（$ text = preg_replace_callback（ "| | i "、" colorCloudCallback "、$ text）; return $ text;）function colorCloudCallback（$ matches）（$ text = $ matches; $ color = dechex（rand（0.16777215））; $ pattern =" / style =（\ "| \"）（。*）（\ "| \"）/ i "; $ text = preg_replace（$ pattern、" style = \ "color：＃（$ color）; $ 2; \" "、$ text） ; 戻る" ";）add_filter（" wp_tag_cloud "、" colorCloud "、1）;

警告。これらの機能（背景色、リンク色）の両方を同時に使用しないでください。同時に使用しないと、競合が発生する可能性があります。 1つを選択すると、すべてのラベルで機能します。

結果。

投稿の最後にタグを表示する

結論として、前述のように、記事の最後にタグを表示します。関数の後に、single.phpファイルに追加する必要があります、次のようなコード：

"); ?>

そして、たくさんのスタイリング。

タグポストa（background：＃D02B7B; border-radius：2px; padding：4px; text-decoration：none！important; color：#fff！important; font-size：11px;）

結果。

それで全部です。

のセブンこんにちは。今日は、CSS3デザインスタイルを使用してラベル（タグクラウド）を美しくデザインします。タグ-サイトでいくつかの基準によって投稿をグループ化するために使用され、ユーザーがブログで情報を見つけやすくするように設計されています。 WordPressですべてのタグを表示するには、ウィジェット、つまりタグのクラウドを使用します。

WordPressのタグクラウド

表示する タグクラウドサイトでは、ウィジェットをサイドバーの適切な場所にドラッグするか、（スクリーンショットを参照）する必要があります。ただし、投稿を書き込む過程でレコードにタグを指定しなかった場合、このタグクラウドは空になります。サイトを作成するためのほとんどすべての無料のcmsにはタグのサポートが組み込まれており、投稿を作成するとき、またはサイトの管理パネルの[投稿]-[タグ]セクションで作成できます。

タグクラウドをサイトに追加した後、それらはあまり見栄えが良くないので、より魅力的にするように努めます。

さて、このデザインは機能しますか？それでは始めましょう。

ワードプレスタグクラウドスタイルファイル

このようなタグクラウドを作成するには、CSS3スタイルを使用します。

タグ（フロート：左;マージン：0 0 7px 15px;位置：相対;

フォントファミリー：「HelveticaNeue」、Helvetica、Arial、sans-serif; フォントサイズ：0.75em フォントの太さ：太字; テキスト装飾：なし; 色：＃996633; テキストシャドウ：0px 1px 0px rgba（255,255,255、.4）; パディング：0em 0.417em 0.05em 0.917em border-top：1px solid＃d99d38; border-right：1px solid＃d99d38; border-bottom：1px solid＃d99d38; -webkit-border-radius：0 0.25em 0.25em 0; -moz-border-radius：0 0.25em 0.25em 0; 境界線半径：0 0.25em 0.25em 0; 背景画像：-webkit-linear-gradient（top、rgb（254、218、113）、rgb（254、186、71））; 背景画像：-moz-linear-gradient（top、rgb（254、218、113）、rgb（254、186、71））; 背景画像：-o-linear-gradient（top、rgb（254、218、113）、rgb（254、186、71））; 背景画像：-ms-linear-gradient（top、rgb（254、218、113）、rgb（254、186、71））; 背景画像：linear-gradient（top、rgb（254、218、113）、rgb（254、186、71））; フィルタ：progid：DXImageTransform.Microsoft.gradient（GradientType = 0、StartColorStr ='＃feda71'、EndColorStr ='＃feba47'）; -webkit-box-shadow：インセット0 1px 0 #faeaba、0 1px 1px rgba（0,0,0、.1）; -moz-box-shadow：インセット0 1px 0 #faeaba、0 1px 1px rgba（0,0,0、.1）; ボックスシャドウ：インセット0 1px 0 #faeaba、0 1px 1px rgba（0,0,0、.1）; ）.tags：before（content： "; width：1.30em; height：1.358em; background-image：-webkit-linear-gradient（left top、rgb（254、218、113）、rgb（254、186、71 ））; background-image：-moz-linear-gradient（left top、rgb（254、218、113）、rgb（254、186、71））; background-image：-o-linear-gradient（left top、 rgb（254、218、113）、rgb（254、186、71））;）;背景画像：線形グラデーション（左上、rgb（254、218、113）、rgb（254、186、71）） ;フィルター：progid：DXImageTransform.Microsoft.gradient（GradientType = 1、StartColorStr ='＃feda71'、EndColorStr ='＃feba47'）;位置：絶対;左：-0.69em;上：.2em; -webkit-transform： rotate（45deg）; -moz-transform：rotate（45deg）; -o-transform：rotate（45deg）; transform：rotate（45deg）; border-left：1px solid＃d99d38; border-bottom：1px solid＃d99d38; -webkit-border-radius：0 0 0 0.25em; -moz-border-radius：0 0 0 0.25em; border-radius：0 0 0 0.25em; z-index：1;）.tags：after（content： ";幅：0.5em; 高さ：0.5em; 背景：#fff; -webkit-border-radius：4.167em; -moz-border-radius：4.167em; ボーダー半径：4.167em ボーダー：1pxソリッド＃d99d38; -webkit-box-shadow：0 1px 0 #faeaba; -moz-box-shadow：0 1px 0 #faeaba; ボックスシャドウ：0 1px 0 #faeaba; 位置：絶対; 上：0.667em; 左：-0.083em z-index：9999; ）.tags：hover（background-image：-webkit-linear-gradient（top、rgb（254、225、141）、rgb（254、200、108））; background-image：-moz-linear-gradient（top 、rgb（254、225、141）、rgb（254、200、108））;）; background-image：-ms-linear-gradient（top、rgb（254、225、141）、rgb（254、200、 108））; background-image：linear-gradient（top、rgb（254、225、141）、rgb（254、200、108））; filter：progid：DXImageTransform。 Microsoft.gradient（GradientType = 0、StartColorStr ='＃fee18d'、EndColorStr ='＃fec86c'）; ボーダーカラー：＃e1b160; ）.tags：hover：before（background-image：-webkit-linear-gradient（left top、rgb（254、225、141）、rgb（254、200、108））; background-image：-moz-linear-背景画像：-o-linear-gradient（左上、rgb（254、225、141）、rgb（254、225、141）、rgb（254））;、200、108））;背景画像：- ms-linear-gradient（left top、rgb（254、225、141）、rgb（254、200、108））; background-image：linear-gradient（left top、rgb（254、225、141）、rgb（ 254、200、108））;フィルター：progid：DXImageTransform.Microsoft.gradient（GradientType = 1、StartColorStr ='＃fee18d'、EndColorStr ='＃fec86c'）;

ボーダーカラー：＃e1b160; ）。

サイト管理パネルを開き、外観/エディタータブに移動し、右側の列でstyle.cssファイルを選択します。上のコードをコピーして、ファイルの最後に貼り付けます。これで、スタイルファイルの作業は完了です。

タグクラウドオプション-wp_tag_cloud関数

の場合、ページのHTMLコードを開き、表示を確認します タグクラウド、2つのクラスで記述されていることがわかります。

タグクラウド
タグ-リンク

ファーストクラス タグクラウドフォントサイズ、リンクの出力形式、並べ替え順序、タグ間の区切り文字などを記述します。2番目のクラス タグ-リンクタグは直接記述されます。

これらのクラスに変更を加えるには、関数ファイル（function.php）を開く必要があります。そして、クラスを説明するコードをファイルの最後に追加します タグクラウド:

関数set_tag_cloud_args（$ args）（$ args ["number"] = 30; $ args ["largest"] = 10; $ args ["smallest"] = 10; $ args ["unit"] = "px"; $ args ["format"] = "flat"; return $ args;）

最小-最も人気のないタグの最小フォントサイズ。
最大-人気のあるラベルの最大フォントサイズ。
unit-フォント定義の値-pt、px、em、％（デフォルトではptで、通常はpxピクセルで設定します）;
number –表示するタグの数（デフォルトでは45）。
format-リンクを表示するためのフォーマット：flat（スペース区切り-デフォルト）、list-ULリスト、array-PHPの配列として。
セパレータ-タグ間のセパレータ（デフォルト-スペース）;
orderby-並べ替え：名前-名前で（最初は）、カウント-人気で;
順序-並べ替え順序：昇順-ASC（最初は）、降順-DESC、ランダム-RAND;
除外-クラウドから除外するタグ。
include-クラウドに含めるタグ（これらのみが表示されます）。

必ずパラメータ'largest'='smallest'=10を設定してください。 -人気のあるタグと人気のないタグで同じフォントサイズ タグクラウド。残りのパラメータをお好みに合わせて設定します。

次に、category-template.phpファイル（wp-includesフォルダーにあります）で、cntr+Fキーボードショートカットを使用して次の行を見つけます。

$ a = "$ tagname";

皆さん、こんにちは！今日の記事では、作成するのに最適な4つのプラグインについて詳しく見ていきます。 WordPressタグクラウド。確かに、WordPressブログのナビゲーションと構造化は非常に不十分であり、メニューだけを使用して必要な情報を見つけることが難しい場合があります。いくつかの基準に従って記事をグループ化し、ブログをナビゲートするための追加の方法を提供することができるのは、救助に来るタグです。

実際、タグクラウドはで利用可能なすべてのリストです。読者が特定のトピックに関する記事をすばやく見つけるためにそれを使用できるように、彼らはそれを美しく、キャッチーに実行しようとします。多くの場合、最も人気のあるタグは、すぐに目を引くように、カラーまたは大きなフォントで強調表示されます。デザインに関しては、2種類のラベルクラウドを選びます。

透明な球の形で作られた美しい体積3D雲。マークはその表面にあるかのように配置されます。マウスカーソルでそれらにカーソルを合わせると、球が回転し始め、非常に印象的です。いろいろなブログでよく見かけると思います。それらの実装には、HTML5のフラッシュまたはCanvasテクノロジーが使用されます。
シンプルでかわいいフラット2Dタグクラウド。フリルが苦手な方に最適です。

この投稿で説明されているすべてのプラグインが標準でインストールされていることに注意してください。wordpress.orgからアーカイブをダウンロードし、現在のディレクトリに解凍して、ファイルを含む結果のフォルダを/ wp-content/pluginsディレクトリのサーバーにアップロードします。 WordPress管理パネルの「プラグイン」セクションでアクティブ化するだけです。

3D3Dタグクラウドを作成するためのWordPressプラグイン

私はこのトピックに関するかなりの数のプラグインを見てきましたが、それらの中で最も成功したのはWP-CumulusとTagCloudCanvasです。それらが得る効果に関しては、それらは似ています-どちらもタグのボリュームのある球形のクラウドを作成し、最初のものだけがフラッシュを使用し、2番目はHTML5の新しいCanvasテクノロジーを使用します。

WP-Cumulus-フラッシュタグクラウド

ロシア語版のWP-Cumulusをダウンロードし、上記のようにインストールします。

ブログページのタグクラウドは、次の3つの方法で表示できます。

ショートコードを使用して、コンテンツ領域にWordPressのページと投稿を表示します。
次の行のphpコードをWPテーマのテンプレートに貼り付けます。
そして、最も一般的な方法は、同じ名前の新しいタグクラウドを使用して、ブログのサイドバーにタグのクラウドを表示することです。

ウィジェットの設定では、タイトル、サイズ、背景とテキストの色、回転速度を設定できます。また、タグだけでなく、見出しも表示することができます。このオプションは、私のようにWordPressでタグを使用しない人に適しています。

これはどのように見えるかです：

もちろん、ダイナミクスでは、クラウドははるかに壮観に見えます。

タグクラウドキャンバス-HTML5タグクラウド

機能面では、このプラグインは上記のWP-Cumulusと同じですが、フラッシュではなくHTML5を使用しているだけです。タグクラウドキャンバスはwordpress.orgからダウンロードできます。コンテンツ領域のタグクラウドの出力は提供されません。同じ名前の新しいウィジェットのみが使用可能です。

設定は英語にしますが、その数は非常に少なく、簡単に理解できます。

タイトル-タイトル。
分類法-表示するもの：タグ、カテゴリ、またはその両方。
形-雲の形（言葉遊び！）。球、水平円柱、または垂直円柱を選択できます。
幅と高さ-ピクセル単位の幅と高さ。
テキストの色-テキストの色。
背景色-背景色。
背景は透明ですか？ —背景を透明にします。

外見上、WP-Cumulusと大差ありません。

2Dクラウドの作成

次に、フラットな2DWordPressタグクラウドについて説明します。ここでも、2つの非常に優れたプラグインであるOpacityTagsとBetterTagCloudに焦点を当てたいと思います。それぞれについて詳しく見ていきましょう。

不透明度タグをダウンロードして、WordPressにインストールします。新しいウィジェットが表示されます-不透明度タグタグクラウド。その設定を考慮してください：

ピクセル単位のフォントサイズ—ピクセル単位のテキストサイズ。
表示するタグの数-表示するタグの数。
タグフォントの色-テキストの色。色を選択できない場合は、ウィジェットを保存して再試行してください。

設定は密ではありませんが、まあ。これは、ウィジェットがブログでどのように表示されるかを示しています。

このような控えめな名前のプラグインをwordpress.orgから再度ダウンロードできます。すべてのプラグイン設定は、「プラグイン」-「BetterTagCloud」セクションにあります。主なものを簡単に見てみましょう：

タイトル-タイトル。
分類法-表示するもの。デフォルトはpost_tag、つまりタグです。
最小フォントサイズ-最小テキストサイズ。最大フォントサイズ-最大サイズ。単位-測定単位。
表示するタグの数-表示するタグの数。 0-使用可能なすべてのラベルを表示します。
フォーマット-出力フォーマット。
Orderby-タイトル、このタグが付いた投稿の数、またはその両方で並べ替えます。
タグに投稿数を追加しますか？ -各タグが関係する投稿の数を表示します。
投稿数をハイパーリンクの外に置きますか？ -投稿カウンターをハイパーリンクの外に移動しますか？
少なくとも何度も使用されたタグのみを表示する-少なくとも何度も使用されたタグのみを表示します。
タグクラウドにカテゴリを追加しますか？ -カテゴリを追加しますか？
1行に複数の単語を含むタグを強制しますか？ -1行に複数の単語のラベルを表示する必要がありますか？
nofollow属性を追加しますか？リンクにnofollow属性を追加しますか？

設定が完了すると、サイトのページへの表示を開始できます。 3つの方法が利用可能です。

ただし、これは非常に単純であり、設計と機能の要件を常に満たすとは限りません。この記事では、より美しく便利なラベルクラウドを作成できると同時に、シンプルで軽量なプラグインについて学習します。

Cool Tag Cloudプラグイン：WordPress Tag Cloud

Cool Tag Cloudプラグインは、見やすく、カスタマイズと使用が簡単な、簡単にカスタマイズ可能なタグクラウドウィジェットを作成します。完全にロシア語の翻訳があるので、問題はありません。

タグクラウドは、サイトの訪問者がこのプロジェクトがカバーするトピックを想像するために、より適切にナビゲートするのに役立つ追加のナビゲーションツールです。この要素は、行動要因に役立ちます。

WordPressタグクラウドを作成するには、以下のリンクからCoolTagCloudプラグインをダウンロードしてください。インストールしてアクティブにします。

設定後、ラベルクラウドは次のようになります。

WordPressクールタグクラウド

プラグインには独自の設定がないため、すぐに「外観」コンソール項目と「ウィジェット」サブ項目に移動します。「CoolTagCloud」ウィジェットを選択し、目的のサイドバーにドラッグして展開し、設定します。

すべてのオプションはロシア語です。私はあなたが必要なものをあなたに話すつもりさえありません。

このプラグインの機能のリストを提供するだけです。

柔軟なフォント設定：ファミリ、スタイル、サイズ。タグの最小フォントサイズと、エントリ数が多いタグまたは少ないタグの最大サイズを設定できます。
10色のオプションにより、このWordPressラベルクラウドはあらゆるデザインに適しています。
左右の向き。おかげで、左右のサイドバーの両方に雲を調和して配置できます。
シンプルで簡単なホバーアニメーション。
ウィジェットに表示されるラベルの最大数を設定する機能。
タグの代わりにカテゴリを表示する機能、およびサイト上の他の分類法（存在する場合）。
ホバー時にラベルのエントリ数を表示します。
タグがインデックスに登録されないように属性を含める機能。

ラベルまたはタグのクラウドを作成し、作成したリソースのページに表示することで、リソースに追加のナビゲーションを実装することを検討できます。

まず、それが何であるかを理解しましょう？

タグ（タグ）は、それらに添付されたレコードを特徴付ける単語またはフレーズです。ルーブリックと同じ方法で作成されます。これらはブログに表示され、ブログのナビゲーションを追加したり、ブログのページ数を人為的に増やしたりします。確かに、それらの作成は、投稿されたメモの一意性を低下させます。

タグクラウドは、ブログの特定の領域（通常はサイドバー）内に配置される一連の単語で構成されます。ユーザーはこれらの単語を見て、探している情報の意味を特徴付ける単語を探し、リンクのアンカーワードをクリックして、アナウンスページを開きます。おそらくそれらは彼の興味を引くでしょう。

これは読者にとって便利であり、私にとっても良いことですが、単語の数を乱用したり、生成されたタグのスパムに惑わされたりしないでください。一方、エントリの意味を簡潔に反映する単語または短いフレーズのセットを定義するようにしてください。理想的なオプションは、キーワードをタグとして使用することです。これは、各投稿をさらに最適化するのに役立ちます。それらを識別するために、オールインワンSEOパックプラグインはあなたを助けます