ミスティーク5.0+ワードプレスのテーマを変更する方法

ミスティーク3.0 WordPressのテーマは、多くの作り付けの機能を備えていますが、まだ人が必要に合わせて神秘のテーマの変更を探しています。

A+ A-

我々の以前の記事ではカバーしている50最重要指名手配ミスティークテーマの変更、ハッキングを 。 ミスティーク3.0での変更のための我々の最愛の読者によって巨大な需要と前回の記事のための巨大な応答を考慮すると、ここでは、最重要指名手配ミスティーク3.0以降の変更ハックを公開しています。 あなたの選択に従ってミスティークのテーマをカスタマイズします。

注意:あなたがものをコーディングに慣れていない場合は、単一のコード行を編集するには、no必要はありません、チェックアウト変更されたミスティークのテーマは - MystiqueRevised

コー​​ドスニペットは、ミスティークのテーマを変更します:

注:ミスティークワードプレスのテーマを変更するには、[表示]で、次のコードを追加する必要があります- >ミスティーク- > CSSまたは[ 詳細設定 ]タブインチ 私たちはあなたのテーマを更新するときに何らかの変更を失うしないように、常にミスティーク子テーマをインストールすることをお勧めします。

1.サイトのタイトルロゴの位置を調整します。

#site-title {
padding: 25px 0 2px 0;
}

25ピクセルは、サイトのタイトル上の空間で、2ピクセルは、サイトのタイトルやサイトのロゴの下の空間です。

2.変更サイトタイトルの色:

#logo a {
color: #E0E0E0;
}

あなたが別の色にしたい場合E0E0E0の値を変更します。

あなたは私たちの選択肢ごとにサイトのタイトルを作りたい場合は、次のコードを追加します。

#logo a {
    color: #E0E0E0;
    display: block;
    font-variant: small-caps;
    text-decoration: none;
    text-transform: none;
}

#logo {
    font: bold 395% Verdana,Arial,Helvetica,"Arial Black","Helvetica Black",Gadget,sans-serif;
    letter-spacing: -2px;
}

3.ブログのタイトルのホバー色を変更します。

#logo a:hover {
color: #CECECE;
}

あなたが別の色にしたい場合CECECEの値を変更します。

4.増加サイトのタイトルのテキストサイズ:

コー​​ド次のサイトのタイトルテキストの使用のサイズを大きくします。 それに応じて350の値を調整します。

#logo {
font: bold 350% "Arial Black","Helvetica Black",Gadget,sans-serif;
letter-spacing: -2px;
}
/* Change Appearance of Previous and Next Links */
.post-links a{
background-color: transparent;
border: 0 none;
color: #0071BB;
font-size: 14px;
font-weight: bold;
padding: 2px 4px;
text-decoration: none;
text-shadow: 1px 1px 1px #FFFFFF;
}

.post-links a:hover{
color: #ED1E24;
}

.post-links div{
color: #0071BB;
display: block;
line-height: normal;
max-width: 49%;
}

.post-links .alignright{
text-align: right;
}

6.ナビゲーションバーとコンテンツの間のスペースを調整します。

.shadow-right {
padding-bottom: 18px;
}

あなたの必要性に応じて18の値を調整します。

7.主なコンテンツとナビゲーションバーに参加:

.shadow-right {
padding-bottom: 0;
}

.social-media {
bottom: 10px;
right: 10px;
}

Join Navigation Bar - Mystique Theme Modifications

8.小文字にウィジェットのタイトルをONにします:

.block .title h3 {
text-transform: none;
}

9.ポストの内のテキストのデフォルトのフォントサイズを変更します。

.hentry .post-content {
font-size: 16px;
line-height: 20px;
margin: 0 0 15px;
}

各ポスト10.ボーダー:

一部の人々は、各ポストに境界線を追加したい、ここでそれを行うためのコードです、

.post{
border:2px solid;
margin:0 0 40px;
padding:15px;
text-align:justify;
}

Border For Each Post

11.黒の背景を変更します。

ミスティークのテーマでは、デフォルトの背景は、あなたが他にそれを変更することができ、黒です。 ここでは、例として、青色ました。 代わりに青のあなたは#CECECEまたは必要に応じてその他の値としてカラー値を使用することができます。

body{background-color:blue;}

12.代替ヘッダー画像:

次のヘッダー画像を使用するには、画像の下に与えられたコードを追加します。

/* Alternate header image */
#page{
background:transparent url(/images/extras/header-alternate.jpg) no-repeat center top;
}

あなたは子供のテーマを使用している場合は、画像のフルパスを与えます。 私は子供のテーマを使用していますたとえば、私は次のコードを追加しました、

/* Alternate header image */
#page {
background:transparent url(/uploads/other-domain/wp-content/themes/mystique/images/extras/header-alternate.jpg) no-repeat center top;
}

13.センターヘッダ内のロゴ画像:

#logo {
width : 100%;
text-align : center !important ;
}

Center Logo

14.ソーシャルメディアのアイコンを移動します。

.media {
    bottom: 30px;
    position: absolute;
    right: 2px;
    z-index: 5;
}

好きなことに30pxの値を調整します。

Move Up Social Media Icons

ポストビューの15の表示数:

Milenko(テーマ開発者は)彼のフォーラムで語ったように、ポストビューはすでに実装されますが、ためにポストビューを記録する大規模なサイトではデフォルトで無効になっている(すなわち。データベースに訪問者がページを表示するたびに更新する)パフォーマンスに影響を与える可能性があります。
あなたはポストビューカウントを有効にする場合は、あなたの子供のテーマフォルダからのfunctions.phpファイルを開く(神秘性、拡張する必要があります)と追加します。

define('ATOM_LOG_VIEWS', true);

そして、次のコードを探して、あなたが好きな場所teaser.php、例えば、テンプレートでそれを使用します(あなたの子供のテーマフォルダにオリジナルをコピー):

<?php if(atom()->options('post_category') && atom()->post->getTerms('category')): ?>
<?php printf(_a('in %s'), atom()->post->getTerms('category', ', ')); ?>
<?php endif; ?>

その後、上記のコードの下に次のコードを追加します。

| Views <?php echo atom()->post->getViews(); ?>

No of Views

内部のウィジェット、「投稿」ウィジェットのようなことができますテンプレートで{VIEWS}キーワードを使用して、出力ポストビューが。

16.古いテーマのようなカテゴリでページを置き換えます。

atom()->addContextArgs('primary_menu',categoryMenu);

今、あなたは、メニュー内のカテゴリを取得します。

17.ブログのタイトルテキストの間隔を変更します。

#logo{
  letter-spacing: 0; /* change this value, default is -6px */
}

3.0からナビゲーションバーを削除する方法18

#header .shadow-left{
  display: none;
}

子テーマを使用して、より良い方法は、:あなたの子供のテーマにheader.phpのコピーとナビゲーション用のコードを削除します

19.オール、ULを調整します。

オール、UL間のリスト項目は、左の境界上で切断されています。 ここではこれらの項目を調整するためのコードです

.hentry ol,ul{
  padding-left:15px;
}

20.ちょうどロゴの近くにバナーを追加します。

Logo with Banner

#header {
background: url(/uploads/other-domain/wp-content/themes/mystique/images/YOUR-LOGO-NAME.png);
background-repeat: no-repeat;
background-position:70% 30%;
}

70%が 'X'座標であり、30%が 'Y'座標です。 だから変更:のbackground-position:98%50%を、
バナーの位置を調整します

オーダー・バイ・ビューの21スターアイコン:

唯一のオーダー・バイ・ビューは星のアイコンを持っていません。 コメントの順序は、しかし、それを持っています。 そこでここではオーダー・バイ・ビューの星のアイコンを追加するためのコードがあり、

.block-tabs .tabs .navi li.nav-posts-views a{background-position: 0 -37px;}

22.変更[...] 'さらに読む」との抜粋から:

子テーマを使用して、ユーザーに次のコードを追加します - 定義されたコード。

<?php
add_filter('excerpt_more', 'my_read_more_text');
function my_read_more_text($text){
return sprintf(' <a class="more-link" href="%1$s">%2$s</a>', get_permalink(), 'Read further...');
}

23.灰色のサイドバー(#eee)とメインコンテンツ白(#FFF)を行います。

Sidebar Content

.c2right #mask-1,
.c2left #mask-3,
.c3 #mask-2,
.c3left #mask-3,
.c3right #mask-1
  {background: #fff;}

.c2left #mask-1,
.c2right #mask-3,
.c3 #mask-1, .c3 #mask-3,
.c3left #mask-2,
.c3right #mask-3
  {background: #eee;}

24.固定カスタム背景画像:

#page
{
  background-repeat:no-repeat;
  background-attachment: fixed;
}

コメントはドゥーフォローにする方法25:

WordPressのダッシュボード - >外観 - >エディタ
オープンcomment.phpファイル( 推奨:使用子テーマは、子テーマフォルダに親テーマフォルダからcomment.phpファイルをコピー)と交換してください

atom()->getAuthorAsLink()

ととも​​に

atom()->getAuthorAsLink('dofollow')

「表示詳細」ボタンの26の変更外観:

デフォルトでは "ショーは、もっと」ボタンは、それが簡単に見えるようにするために、次のコードを使用して、簡単に表示されません。

.no-fx .block a.more, .block .fadeThis a.more {
    -moz-border-radius: 5px 5px 5px 5px;
    background: none repeat scroll 0 0 #0997e1;
}

あなたは青以外の色を使用する場合は、あなたが好きに値#0997e1を変更します。

ホームページ上のコメントの数を示し、画像の27の変更外観:

Modified Comments Image Mystique

まず、ダウンロードして追加icons.pngあなたのミスティークの画像フォルダに画像ファイルを(テーマ/神秘/画像/)。

.hentry .comments {
position: absolute;
right: 1px;
top: 5px;
z-index: 5;
background: url("YOUR SITE URL HERE/wp-content/themes/mystique/images/icons.png") no-repeat scroll 0 -505px transparent;
width: 48px;
height: 38px;
text-transform: uppercase;
text-align: center;
text-decoration: none;
text-shadow: #999 0px -1px -1px;
line-height: 34px;
font-size: 150%;
ont-weight: bold;
}

.hentry a.comments:hover {
background-position: 0px -543px;
color: #fff;
text-shadow: #000 0px -1px -1px;
}

「ここにあなたのサイトのURLを「実際のサイトURLにテキストを変更することを忘れないでください。

28.テーブルに透明な境界線を追加します。

table,table td,table th,table tr.even td,table tr:hover td{border:0;background-color:transparent;}

29.すべてのポストの見出しのサイズを減らします。

h1.title {
    font-size: 250%;
}

元の値があなたの必要性に応じて値を調整し、300%です。

サイドバーを覆うことなく画像を表示するために、単一の記事のために30:

img {
max-width: 468px;
max-height: 560px;
}

誰もが望んでいたために、あなたの好みに最大幅を調整します。

タイトルの下に31の移動キャッチフレーズ:

#logo{
  float:none;
}

#site-title .headline{
 float:none;
 border:0;
 margin:20px 0;
 padding:0;
}

ミスティーク5.0+ナビゲーションバーでGoogleの+1ボタンを追加する方法32:

WordPressのダッシュボードの下 - >外観 - >エディタ
テンプレート列に「footer.php "ファイルを探します。
以下のためのfooter.phpファイル検索で タグとbodyタグの前に次のコードを追加します。

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

そして、WordPressのダッシュボードの下 - >外観 - >ミスティークの設定
[詳細設定]タブで- >「ユーザー定義コード 」。

<?php
// for custom menus
add_filter('wp_nav_menu_items', 'add_google_plus_button_to_menus');

// for the default page menu
add_filter('wp_list_pages', 'add_google_plus_button_to_menus');

function add_google_plus_button_to_menus($items){

// append it to the nav menu
return $items.'<li style="float: right; margin-left: 111px; padding-top: 6px;">
<div class="g-plusone"><g:plusone annotation="inline"></g:plusone></div>
</li>';
}

Google Plus Button Mystique Nav

今すぐあなたのミスティークナビゲーションバーでGoogle+ボタンが表示されます。 あなたは、FacebookのLikeボタンを追加するために同じ手順を繰り返すことができます。

ミスティーク5.0+ナビゲーションバーで検索を追加する方法33:

下のWordPressのダッシュボード- >外観- >ミスティークの設定
[詳細設定]タブで- >「ユーザー定義コード 」。

<?php

// for custom menus
add_filter('wp_nav_menu_items', 'add_search_to_menus');

// for the default page menu
add_filter('wp_list_pages', 'add_search_to_menus');

function add_search_to_menus($items){

// capture the search template
ob_start();
atom()->template('searchform');
$search = ob_get_clean();

// append it to the nav menu
return $items.'<li class="nav-search">'.$search.'</li>';
}

そして、ミスティークの設定に次のコードを追加します - > [CSS]タブ

/* increases top/bottom padding on nav items, so it fits the theme-default search form */
.nav-main a{
padding:12px 15px 14px;
}

/* position and width of the form: top-right */
.nav-main li.nav-search{
position:absolute;
background: none;
border: 0;
width: 250px; /* <- width of the search form, can be changed */
height: 34px;
right:10px;
top:5px;
}

/* no padding on this nav menu item */
.nav-main li.nav-search a{
padding: 0;
}

.nav-main li.nav-search li:hover a{
background-color: transparent;
}

.media {
bottom: 35px;
position: absolute;
right: 2px;
z-index: 5;
}

Search in Mystique Navigation Bar

ホームページのスタイルを変更する方法34:

あなたはホームページの外観を変更したいだけのポストサムネイルと投稿のタイトルを表示したい場合は、新しいファイルを作成し、あなたの子供のテーマフォルダ内のファイルに名前teaser.phpを与え、teaser.php内側に次のコードを追加します。

<article id="post-<?php the_ID(); ?>" <?php post_class('thumb-only'); ?>>
<a class="post-thumb" href="<?php atom()->post->URL(); ?>">
<?php atom()->post->thumbnail(); ?>
</a>

<section>
<header><a href="<?php atom()->post->URL(); ?>"><?php atom()->post->title(); ?></a></header>
<p><strong><?php atom()->post->terms('category'); ?></strong></p>
<footer><?php atom()->post->date(); ?></footer>
</section>
</article>

そして、ミスティークの設定に - > [CSS]タブには、次のコードを追加します。

article a img{
  border: 1px solid #fff;
  box-shadow: 0 0 5px 1px #888;
}

article section{
  text-align:right;
}

article section header{
  font-size: 130%;
}

ブレッドクラムを追加する方法35:

私たちはあなたミスティークのテーマにブレッドクラムを追加することをお勧めいたします。 それが原因ユーザビリティの設計に非常に良い加えてであり、それが故にページのインデックス作成にボットの活性を増大させるパスにリンクしているため、それはまた、SEOのメリットを提供します 。 ブレッドクラムは、親ページ等に、次の投稿へ、または子ページから、ポストから、カテゴリに、簡単にサイトをナビゲートする方法を提供します

まず、あなたがする必要がRDFaのブレッドクラムのプラグインのダウンロード 、アップロードをし、いつものようにそれをアクティブにします。 あなたが使用している場合YoastによってWordPressのSEOを 、次に方法は、WordPressのSEOを使用してパンくずリストを追加するには、以下のとおりです。

注:有効化ミスティーク子テーマ(ミスティーク-拡張)、その後、WordPressのダッシュボードの下- >外観- >ミスティークの設定- >詳細設定、 ユーザー定義のコードを探し、次のコードを追加します。

echo '<div style="font-size: 13px; line-height: 18px; margin: 1px 0; padding: 2px 0;">';
       atom()->add('before_primary', function(){
          if(function_exists('rdfa_breadcrumb')){ rdfa_breadcrumb(); }
       });
echo '</div>';

あなたはパンくずリストのオプションを有効にした場合における( - - > SEO WordPressのダッシュボード>内部リンク) YoastワードプレスのSEOを 、その後の代わりに上記のコードの追加詳細設定>「ユーザー定義コード」に次のコードを追加します。

echo '<div style="font-size: 13px; line-height: 18px; margin: 1px 0; padding: 2px 0;">';
       atom()->add('before_primary', function(){
          if ( function_exists('yoast_breadcrumb') ) {
             yoast_breadcrumb('<p id="breadcrumbs">','</p>');
          }
       });
echo '</div>';

次のようにコードの上に追加した後、あなたの投稿にブレッドクラムが表示されます。

Breadcrumbs For Mystique WordPress Theme

ブレッドクラムを追加した後、検索エンジンの検索結果ページ(SERP)にあなたのサイトの結果は次のようになります。

Breadcrumbs in SERP

注:これは、検索エンジンのロボットがサイトをクロールする方法に応じて、すべてのページのパンくずリストを表示するには、2日に約12時間かかります。 あなたはでサイトのブレッドクラム確認することができますリッチスニペットツール

もう一つは、以前と次のポストのリンクは、リンクではなく、上記の記事のタイトルの後の後である場合に便利ですので、コードを探します

<?php if(atom()->options('single_links')): ?>
            <div class="post-links clear-block">
              <div class="alignleft"><?php previous_post_link('&laquo; %link') ?></div>
              <div class="alignright"><?php next_post_link('%link &raquo;') ?></div>
            </div>
<?php endif; ?>

次の行の後のコードとペーストをカット:

 <?php atom()->action('after_primary'); ?>

前と次の投稿リンクの外観を変更したい場合は、チェックアウトする第五のコードスニペットを

キャプションテキストを大きくする方法36:

あなたはキャプションテキストのフォントサイズを変更したい場合は、ミスティークの設定に次のコードを追加します - > [CSS]タブ

.wp-caption-text {
   font-size: 13px;
}

我々は更新このトピックをしておこうので、将来的には、ミスティークのテーマで多くの変更を行います。 あなたがここで提供されるコードスニペットに関するいくつかの提案や問題が発生した場合は、下記のフォームのコメントで私たちとそれを共有し、我々はあなたの問題を解決しようとするでしょう。

参考: digitalnatureでフォーラム 、Milenkoのおかげ。

あなたはこれらのミスティークのテーマの変更のような場合リツイートやFacebook上の友達とシェア、Google +でください。

Ads

シェア

最近

あなたがLinuxの恋人している場合を探すために、ベストUbuntuの代替

さんが何かに精通取得することから始めましょう。 基本的な、少しオフトラック! あなたは今までLinuxとUbuntuの...

Gmailの受信トレイに署名を追加する方法 - GmailでGoogleの署名を追加します。

Googleによる受信トレイには、Googleが過去数年間に発売された最高のものの一つでした。 これは、統一された受信...

週刊技術のニュース:ノキア、Googleと任天堂

みなさん、こんにちは、それは金曜日、3月3日だとちょうどいつものように私たちは毎週のニュースラウンドアップに戻っていま...

初心者のためのラズベリーパイプロジェクト - あなたはラズベリーパイで何ができますか

ラズベリーパイは、低消費電力、ラズベリーパイ財団が作成したシングルボードコンピュータのシリーズです。 もともと発展途上...

Androidの2017のためのベストVPN - Androidの中でVPNを使用する方法

ゴーンは、VPNはハイテクsavviesやハッカーのためだけであった時代です! そして、私たちはこれらのサービスについ...

コメント