미스틱 3.0 워드 프레스 테마를 수정하는 방법

미스틱 3.0 워드 프레스 테마는 많은 붙박이 기능을하지만 여전히 사람들이 필요에 맞게 신비 테마 수정을 찾고 있습니다.

A+ A-

우리의 이전 기사에서 우리는 덮여있다 , 해킹을 50 인기 항목 미스틱 테마 수정을 . 미스틱 3.0 수정에 대한 우리의 사랑하는 독자들에 의해 거대한 수요와 이전 기사에 대한 큰 반응을 고려하면, 우리가, 인기 항목 미스틱 3.0 이상 수정 해킹을 게시하고 있습니다. 당신의 선택에 따라 미스틱 테마를 사용자 정의합니다.

참고 :이 물건을 코딩에 익숙하지 않은 경우 코드 한 줄을 편집 할 필요가없는, 체크 아웃 수정 미스틱 테마 - 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. 전원을 켜고 위젯 제목 :

.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;
}

당신이 원하는대로에 30 픽셀의 값을 조정합니다.

Move Up Social Media Icons

포스트 뷰 (15) 표시 번호 :

밀렌 (테마 개발자)가 자신의 포럼에 말했듯이, 포스트 뷰는 이미 때문에 게시물 조회수를 기록하는 대형 사이트 (즉. 데이터베이스를 때마다 방문자를 업데이트하는 것은 페이지를 볼 때) 성능에 영향을 줄 수 있습니다 구현하지만, 기본적으로 비활성화되어 있습니다.
당신이 게시물 조회수를 활성화 자녀 테마 폴더에서 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. OL, 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'좌표이다. 그래서 그냥 변경 : 배경 - 위치 : 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;
}

댓글 dofollow 만드는 방법 25 :

워드 프레스 대시 보드에서 -> 모양 -> 편집기
열기 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;
}

미스틱 3.0 네비게이션 구글 +1 버튼을 추가하는 방법 (32) :

워드 프레스 대시 보드에서 -> 모양 -> 편집기
템플릿 열에서 "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>

그리고 워드 프레스 대시 보드에서 -> 모양 -> 미스틱 설정
고급 탭에서 -> "사용자 정의 코드".

<?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+ 버튼이 표시됩니다. 당신은 페이스 북과 같은 버튼을 추가하는 동일한 절차를 반복 할 수 있습니다.

미스틱 3.0 이상 탐색 표시 줄에서 검색을 추가하는 33 방법 :

아래의 워드 프레스 대시 보드 -> 모양 -> 미스틱 설정
고급 탭에서 -> "사용자 정의 코드".

<?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로 워드 프레스 SEO를 다음 방법은 워드 프레스 SEO를 사용하여 이동 경로를 추가하려면 아래와 같습니다.

참고 : 활성화 미스틱 자식 테마 (미스틱은-확장), 다음 워드 프레스 대시 보드에서 -> 모양 -> 미스틱 설정 -> 고급, 사용자 정의 코드를보고 다음 코드를 추가합니다 :

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> 내부 링크 워드 프레스 대시 보드) 이동 경로 옵션을 사용하도록 설정 한 경우 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에 포럼 , 밀렌에 감사합니다.

이러한 미스틱 테마 수정을 좋아 리트 윗와 페이스 북에서 친구들과 공유하고 Google+에서하시기 바랍니다.

Ads

충적세

당신이 리눅스 연인이 있다면 최고의 우분투 대안 찾아요

의 뭔가 익숙해 보겠습니다; 기본적이지만 조금 오프 트랙! 혹시 리눅스와 우분투 용어와 혼동있어 적이 있습...

Gmail의받은 편지함에 서명을 추가하는 방법 - Gmail에서 구글 서명 추가

Google의받은 편지함 구글은 지난 몇 년에 출시했던 최고의 물건 중 하나였다. 그것은 통합받은 편지함에...

주간 기술 뉴스 : 노키아, 구글, 닌텐도

안녕하십니까, 그것은 금요일, 3 월 3 일이고 단지 언제나처럼 우리는 다시 우리의 주간 뉴스 검거에있어....

초보자를위한 라즈베리 파이 프로젝트 - 당신은 라즈베리 파이로 수행 할 수있는

라즈베리 파이는 낮은 전력의 라즈베리 파이 재단이 만든 싱글 보드 컴퓨터 시리즈입니다. 원래는 개발 도상국...

안드로이드 2017 모범 VPN - 안드로이드에 VPN을 사용하는 방법

사라는 VPN을이 기술에 savvies 해커 만 있었다 일입니다! 그리고, 우리는이 서비스에 대해 강의 충...

코멘트