워드 프레스 웹 사이트 재 설계 (개인 터치 추가)

다른 플랫폼에서는 WordPress와 같은 웹 사이트의 모양과 느낌을 사용자 지정할 수 있습니다. WordPress가 게시자 및 웹 개발자 모두에게 인기가있는 이유 중 하나입니다..


기본적인 WP 테마를 사용하고 로고를 추가하고 몇 줄의 코드를 편집하며 CSS를 변경하고 전문적인 (아직 개성있는) 웹 사이트를 만들 수 있습니다. 작업이 쉬우 며이 튜토리얼에서는 수행 방법을 보여줍니다..

준비 되었나요? 먼저 먼저 시작하겠습니다. 색깔.

색 구성표 디자인

WordPress 사이트의 색 구성표를 개발할 때 고려해야 할 사항이 많이 있습니다. 집이나 돌과 박격포 상점을 그리는 것으로 생각하십시오. 당신은 당신의 벽에 갈 색상과 당신이 문을 원하는 색상을 결정해야.

외관과 인테리어를 페인트하는 방법은 개인 취향의 몇 가지 요소에 달려 있습니다..

워드 프레스 사이트의 색상도 다르지 않습니다. 어떤 색을 원하십니까? 당신의 배경, 당신은 그것을 어떻게 가장 매력적으로 만들 것입니까? 어떤 색상이 귀하의 메시지를 보완하거나 강화할 수 있습니까? 당신은 어떻게 당신의 텍스트를 원하십니까? 하늘은 WP 사이트에서 사용할 수있는 색상 선택의 한계입니다.

처음부터 사용할 모든 색상을 결정해야합니다. 세 가지 색상 만 사용하는 것이 좋지만 원하는만큼 색상을 자유롭게 사용할 수 있습니다..

과도하게 사용하지 않으면 마케팅 메시지가 모든 색상으로 희석됩니다. 결국, 초과하는 것은 유독하므로 선택한 색상에 관계없이 조화를 이루는 것이 중요합니다..

대다수의 사람들이 그들을보고 (그리고 희망적으로) 사랑하는 곳에서 가장 많은 색을 사용하는 것이 가장 좋습니다. 나는 당신의 로고와 마스트 헤드에 대해 이야기하고 있습니다. 이 영역은 가장 많은 색상이 필요한 곳입니다. 웹 사이트의 나머지 부분은 덜 화려하지만 더 유익 할 수 있습니다.

216 색 대 12 색

우리는 모두 12 가지 기본 색상에 익숙하지만 웹에는 색상과 색상이 다릅니다. 이러한 이유로, 전문적인 외모를 만드는 동안 개인의 따뜻함을 발산 할 색상을 선택하는 것은 어려운 작업이 될 수 있습니다.

인터넷을 통해 낚시를 시작하고 시작하기위한 다음 도구를 찾았 기 때문에 운이 좋았습니다.

쿨러

쿨러

Kuler는 Adobe가 설계하여 웹 개발자가 최고 수준의 색 구성표를 만들 수 있도록 도와줍니다. Kuler는 온라인 도구이므로 어디에서나 휴대하여 사용할 수 있지만 데스크탑에서 바로 색 구성표를 개발할 수있는 데스크탑 응용 프로그램도 있습니다. 또한 Adobe ID가있는 경우 한 번의 클릭으로 색상 구성표를 저장할 수 있습니다.

Kuler에서 단색, 복합, 보완, 아날로그 및 트라이어드를 포함하여 다양한 색상 규칙을 활용할 수 있습니다..

쿨러 확인.

HTML 컬러 차트

사용할 색상을 아는 것은 작업의 절반에 불과합니다. 색상을 구현하려면 색상을 HTML 코드로 변환해야합니다.

html 컬러 차트

HTML 컬러 차트가 나오는 곳입니다. 200 개가 넘는 웹 컬러 코드가있는 다채로운 차트입니다. 차트로 무장하면 태양 아래서 색이 구현하기 어려워서는 안됩니다.

이 코드는 HTML, CSS, Adobe PhotoShop 및 기타 그래픽 조작 도구와 함께 작동하므로 원하는만큼 색상을 자유롭게 재생할 수 있습니다..

HTML 컬러 차트를 확인하십시오.

일반

색상 선택에 도움이 필요하면 GenoPal이 원하는 응용 프로그램입니다. 색상 표를 브라우저 창에 “고정”하는 매우 간단한 웹 응용 프로그램입니다. 색상을 선택하면 색상이“스티커 메모”형식으로 브라우저에 나타납니다. ��

일반의

GenoPal을 사용하면 밝기를 높이고 색조 채도를 제어 할 수 있으므로 원하는 색조를 정확하게 얻을 수 있습니다.

웹 사이트에서 모바일 앱이 파이프 라인에 있습니다. 앱이 시작되면 앱을 가지고 모바일 장치에서 색상을 개발할 수 있습니다. 그들의 디자인은 독창적이며,이 애플리케이션이 실제로 작동한다는 사실은 GenoPal이 비즈니스를 의미한다는 분명한 신호입니다.

컬러 헥사

ColorHexa는 온라인 버전입니다. 예술가의 페인트 판. 이 웹 사이트에서는 색상 코드를 입력하여 색상을 혼합 할 수 있습니다. 그들의 선행 앱은 색상 혼합 도구이지만 그라디언트 생성기와 색상 감산기도 있습니다. 여기서 일하는 순수한 천재가 아닌가?

칼라 헥사

ColorHexa Blender는 어떻게 작동합니까? 색상 코드를 “+”로 구분하여 입력하면 ColorHexa가 나머지 작업을 수행합니다. 예를 들어, 나는 시도했다 :

# ff0000 + # 0000ff + # ff00ff 그리고 나는 # aa00aa를 얻었다. 또한 전체 색상 정보 페이지 (예 : 최종 색상) (예 : # aa00aa)를 제공합니다. 이것은 결코 전에 같이 색상 혼합을 경험하기 위해 스스로 시도 해야하는 도구 중 하나입니다.

ColorHexa를 확인하십시오.

궁극의 CSS 그라데이션 생성기

최고의 컬러 그래디언트 생성기

색상 그라디언트를 생성하는 한 가장 좋은 도구 일 것입니다. 온라인 상태이며 상쾌한 중간 점과 해당 CSS 코드를 생성하는 데 도움이됩니다. 또한 Chrome 및 Firefox 애드온을 제공하여 더 쉽고 빠르게 액세스 할 수 있도록 앱을 브라우저에 통합 할 수 있습니다.

그라디언트를 볼 수있는 미리보기 영역이 있으므로 원하는대로 그라디언트를 생성하기 만하면됩니다. 복사 붙여 넣기 생성 된 CSS 코드 정말 간단하고 사용했던 것보다 더 많은 색상을 가지고 있습니다..

Ultimate CSS 그라디언트 생성기 확인.

폰트 고르기

이제 피카소와 같은 색상을 선택하고 블렌딩하는 방법을 보여 드렸습니다..

귀하의 색상과 웹 디자인은 사람들을 끌어들일 것입니다. 그러나 그것은 사람들의 관심을 끄는 페이지와 게시물입니다..

우리는 항상 최고의 이야기를 만드는 데 바쁘기 때문에 대부분의 사람들은 글꼴도 중요하다는 사실을 잊어 버립니다. 그러나 선택한 글꼴은 사람들이 웹 사이트와 상호 작용하는 방식에 영향을줍니다. 올바른 글꼴을 사용하면 대상 사용자가 원하는대로 다른 페이지를 클릭하여 클릭하면됩니다. 약혼.

백만 개의 글꼴이 있지만 불행히도 사용자는 자신의 컴퓨터에 설치된 글꼴 만 볼 수 있습니다. 사용하는 글꼴이 컴퓨터에 설치되어 있지 않으면 가까운 대안 (또는 완전히 다른 글꼴)이 표시되어 원하는 효과를 얻을 수 없습니다.

“글꼴로 노는 것은 불로 노는 것과 같습니다. 때로는 웹 페이지에서 일치하는 텍스트, 예쁜 텍스트의 빛을 발할 수 있습니다. 다른 때는 집 전체를 태울 수 있습니다.” – cameraontheroad.com의 Lorelle.

스타일 시트를 사용하여 글꼴을 제어하고 원하는 효과를 만들 수 있습니다. 테마에서 스타일 시트는 일반적으로 style.css 파일. 이 파일을 사용하여 글꼴 색상, 글꼴 / 글꼴 모음 유형, 글꼴 크기 및 선택한 글꼴의 다른 측면을 제어 할 수 있습니다.

다음은 좋은 예입니다.

#menu {font-family : 아리 알, 헬 베티 카, 산세 리프, 베르 다나, "Times New Roman"; 글꼴 크기 : 0.8em; 검정색;}

위의 코드는 메뉴의 글꼴 크기를 0.8em으로 설정하고 색상을 검은 색으로 설정합니다. 또한 글꼴을 Arial로 설정하지만 사용자가 컴퓨터에 Arial이 없으면 Helvetica가 대신 사용합니다. Helvetica 또는 Arial이없는 ​​경우 Verdana, Sans-serif 또는 Times New Roman이 대신합니다..

글꼴을 제어하여보다 일관된 모양과 느낌을 만들 수 있습니다.

그러나 글꼴 불일치 문제를 한 번에 해결하기 위해 포함 된 글꼴을 사용할 수 있습니다. 내장 (또는 외부) 글꼴을 사용하면 컴퓨터에 글꼴이 없어도됩니다..

또한, 손쉬운 작업입니다.

당신이 할 일은 당신의 style.css 다음 코드를 맨 위에 놓으십시오..

@ font-face {폰트 가족 : Museo300; src : url ( "fonts / museo300-regular.ttf") 형식 : ( 'truetype'); font-weight : normal;}

참고 : 글꼴 이름과 위치를 정의해야합니다. 위의 예에서 “Museo300″은 “fonts”라는 폴더에 저장된 글꼴입니다..

예를 들어 웹 사이트에서 글꼴을 사용하려면 다음과 같이 쓸 수 있습니다.

몸 {font-family : Museo300;}

웹 사이트의 모든 요소에 포함 된 글꼴을 사용할 수 있습니다. 예를 들어…

#menu {font-family : Museo300;}

… 메뉴에서 Museo300을 설정합니다.

위의 방법은 글꼴을 다운로드하여 서버에 업로드해야한다는 것을 의미합니다..

하나, 와이사용하려는 외부 글꼴을 다운로드 할 필요가 없습니다..

다음과 같이 head (header.php) 섹션에서 글꼴에 간단히 연결할 수 있습니다.

위의 줄을 어떻게 그리고 어디에 추가합니까? 당신은 열어야합니다 워드 프레스 관리 패널 –> 모양 –> 편집기 –> header.php

header.php 파일을 원하지 않거나 편집 할 수없는 경우 다음 줄을 입력하여 글꼴을 가져 오십시오. style.css:

@import url (http://fonts.googleapis.com/css?family=over+the+rainbow);

위의 예를 사용하면 무지개 너머 사이트의 어느 곳에서나 Google의 글꼴 예를 들어, 웹 사이트 전체에서 Over The Rainbow를 사용하려면 다음 코드를 사용할 수 있습니다.

body {font-family : "오버 더 레인보우";}

구글은 제공합니다 600 개가 넘는 무료 글꼴 모음, 그러니 놀아!

업데이트 (07/12/13): WordPress 사이트에 Google Fonts를 쉽게 추가하려면 Google 타이포그래피 플러그인. Tom Ewer의 “Google 글꼴을 사용하여 WordPress 웹 사이트 타이포그래피 개선”에서 Google 글꼴에 대한 자세한 내용과 구현 방법에 대해 알아볼 수 있습니다..

폰트 재생에 대한 추가 자료

글꼴 추가를위한 워드 프레스 플러그인

코드를 파고 싶지 않은 사람들을 위해 항상 워드 프레스 플러그인을 설치하여 어려운 작업을 수행 할 수 있습니다. WordPress.com에서 가장 많이 사용되는 무료 글꼴 플러그인은 다음과 같습니다.

당신은 재미? 다음으로 넘어 갑시다…

 날짜 및 시간 형식

당신은 당신의 사이트와 관련하여 완전한 멍청한듯한 느낌을주는 정말 멋진 톤으로 날짜 또는 시간을 표시하는 WordPress 사이트를 방문한 적이 있습니까? 이 사이트의 소유자는 한 줄의 코드 그리고 지금 당신은 그들의 날짜를 충분히 얻을 수 없습니다. ㅋ.

좋은 소식은 편집 할 수 있습니다 이 코드 줄 독자들도 놀라게합니다.

당신의 WP 대시 보드, 로 이동 외관, 그리고 편집자 아래 그림과 같이:

서식 날짜

일단 거기에 도착하면 맨 오른쪽에 .php 파일 목록이 나타납니다.

단일 게시물

단일 게시물 (single.php)을 클릭하고 일단 열리면을 눌러 검색 창을 엽니 다. Ctrl + F. 표시되는 검색 창에 다음을 입력하십시오.

시간

다음과 같은 줄이 즉시 나타납니다.

이제 편집하려는 영역이 (‘FY’).

이 섹션을 육체로 씹을 수있는 육체를 줄 수 있습니다..

(‘F Y’)에서‘F’는 이달의 이름 “Y”는 4 자리 연도. 따라서 ( ‘FY’)를 사용하면 날짜는 다음과 같습니다.

2013 년 9 월

F와 Y 사이에 쉼표를 넣으면 다음과 같은 내용이 있어야합니다.

2013 년 9 월

요일 및 기타 요소를 추가하려면 다음 문자를 사용할 수 있습니다.

l = 성명 (소문자 L)

F = 달

j = 일 (날짜)

Y = 4 자리 연도

y = 2 자리 연도

아래 표에서 더 많은 문자를 찾을 수 있습니다.

서식 날짜 테이블

그리고 여기 몇 가지 예가 있습니다 :

서식 날짜 예제

항상 괄호 안의 문자 만 수정해야합니다 ( ‘F Y’), 필기 해, 작은 따옴표를 삭제하지 마십시오. 원하는 효과를 얻으려면 원하는만큼 문자를 사용하고 완료되면 모든 것을 저장해야합니다..

또한 삭제하여 날짜를 제거 할 수 있습니다…

… 내가 얼마 전에 블로그에서 한 것처럼. �� 이제 내가 얻는 건 Fred에 의해 게시 됨. 날짜가 전혀 없습니다.

다음 부분에 연료를 공급합니까? 당신은 더 나은.

the_time 함수를 찾지 못했습니다?

현재 많은 테마가 _time () 함수 대신 the_date () 함수를 사용하고 있기 때문에 실제로는 더 나은 방법입니다. 테마가 the_date () 함수를 사용하는 경우 “설정-> 일반”에서 대시 보드의 데이터 표시 방식을 간단히 변경할 수 있으므로 편집 할 필요가 없습니다..

이미지 사용

이것은 아마도이 튜토리얼에서 가장 쉽고 짧은 부분 일 것입니다. 그러나 WordPress를 처음 접한다면 이미지를 추가하는 것이 어려울 수 있습니다.

WordPress에서는 새 게시물이나 페이지를 만들 때 업로드 유틸리티 또는 (미디어 추가)를 통해 이미지를 추가 할 수 있습니다. 게시물이나 페이지에서 이미지를 놓을 위치에 커서를 놓고 “미디어 추가”를 클릭하기 만하면됩니다..

미디어 추가

업로드 유틸리티가 열리면 캡션, 크기, 링크 및 정렬과 같은 다른 세부 정보를 추가 할 수 있습니다.

유틸리티 업로드

이 영역은 업로드 유틸리티의 오른쪽에 있습니다..

이미지 추가에 대한 자세한 내용은 다음 리소스를 확인하십시오.

멋진 무료 이미지를 어디에서 찾을 수 있는지 잘 모르는 경우 WordPress에 가장 적합한 이미지 리소스를 작성한 게시물을 확인하십시오..

보다? 나는 그것이 가장 짧을 것이라고 말했다.

파비콘 추가

이미지를 완전히 잊기 전에 워드 프레스 사이트에 즐겨 찾기 아이콘을 만들어 추가해 보겠습니다. 즐겨 찾기 아이콘 (또는 즐겨 찾기 아이콘)은 웹 사이트를 북마크하는 데 사용되는 아이콘입니다..

파비콘은 독자가 웹 사이트를 시각적으로 식별하는 데 도움이됩니다.

일반적으로 파비콘은 확장자가 .ico 인 16 X 16 픽셀 정사각형 그래픽 파일입니다. 확장은 아이콘을 나타냅니다.

Favicon을 만드는 방법

온라인으로 또는 GIMP와 같은 이미지 편집 프로그램 또는 .ico 파일을 저장할 수있는 다른 프로그램을 사용하여 즐겨 찾기 아이콘을 만들 수 있습니다. 대부분의 온라인 서비스는 무료입니다.

이미지는 일반적으로 매우 작지만 (16 x 16 픽셀) 즐겨 찾기 아이콘은 블로그 전체를 나타내야합니다. 즐겨 찾기 아이콘을 만드는 데 사용하는 이미지 또는 텍스트는 온라인 비즈니스를 나타내야합니다.

이미지 편집기를 사용하는 경우 :

  • 이미지가 정사각형이되도록 공간을 자르거나 추가하십시오.
  • 이미지 크기를 16 X 16 픽셀로 조정하고
  • 이미지를 다른 이름으로 저장 favicon.ico

파비콘을 만드는 데 사용할 수있는 온라인 서비스는 다음과 같습니다 (이에 국한되지는 않음).

즐겨 찾기 아이콘을 만든 후에는 즐겨 찾기 아이콘을 컴퓨터로 다운로드 할 수 있으므로 걱정하지 마십시오..

WordPress에 Favicon을 설치하는 방법

테마의 기본 폴더에 다른 즐겨 찾기 아이콘이 있으면 FTP 클라이언트 또는 사용 가능한 방법을 사용하여 삭제해야합니다. FTP 클라이언트는 사용하기 쉽고 원하는 파일을 빠르게 찾을 수 있으므로 권장됩니다.

이 튜토리얼에서는 faviconer.com을 사용하여 블로그 및 Filezilla에서 기존 즐겨 찾기 아이콘을 삭제하는 즐겨 찾기 아이콘을 작성했습니다..

favicon.ico 파일을 가지고 테마의 기본 폴더에 파일을 업로드하십시오. 현재 테마가 저장된 폴더입니다..

그런 다음 다른 favicon 사본을 루트 폴더 (일반적으로 public_html) 또는 사이트가 저장된 기본 디렉토리에 업로드하여 yoursite.com/favicon.ico를 입력 할 때 favicon을 볼 수 있습니다. 피드에 즐겨 찾기 아이콘이 자동으로 추가됩니다..

업로드가 완료되면 favicon.ico가 작동해야합니다. 이것이 당신이해야 할 일입니다.

플러그인을 사용하여 Favicon 추가

즐겨 찾기 아이콘을 추가하는 가장 좋은 방법은 플러그인을 사용하는 것입니다. “하나의 Favicon에서 모두”매우 간단한 접근 방식을위한 고급 사용법을위한 플러그인가장 간단한 파비콘“백엔드 옵션이없는 플러그인으로 서버의 올바른 위치에 favicon.ico라는 파일을 업로드하면됩니다..

올인원 즐겨 찾기 아이콘

템플릿에 즐겨 찾기 아이콘을 수동으로 추가

일부 사람들은 (최상의 방법은 아니지만) 즐겨 찾기 아이콘을 템플릿에 수동으로 추가하는 것을 선호 할 수 있습니다. 이렇게하려면 다음 단계를 따르십시오.

  • 에 로그인 계기반
  • 로 이동 외관
  • 그런 다음 편집자 (테마 편집자)
  • 찾아서 열기 header.php (헤더) 파일

이 줄을 헤더 파일에 추가하십시오 (바람직하게는 다른 것을 볼 수있는 상단에) 태그 :

완료되면 저장. 

새로운 변경 사항을 보려면 브라우저를 새로 고침하십시오..

이 시점에서 색상을 변경하고, 더 나은 글꼴을 선택하고, 날짜와 시간을 형식화하고, 이미지를 사용하고, 즐겨 찾기 아이콘을 추가 할 수 있어야합니다.

결론

WordPress 사이트를 다시 디자인하는 것에 대해 너무 많이 논의하여 단일 게시물에서 모든 것을 다루는 것이 장애가 될 수 있습니다..

가장 큰 혜택을 얻으려면 자습서를 여러 부분으로 나누는 것이 가장 좋습니다 (1 부). 우리는 며칠이 지나면 더 많은 재 설계 트릭을 공유 할 것이므로 조심하십시오. 이 튜토리얼의 목적은 최고의 WordPress 사이트를 만들고 스스로 혼자서했기 때문에 더 행복하게 느끼도록 도와주는 것입니다..

의견을 나누거나 토론에 무언가를 추가하려면 아래 의견 섹션에 의견을 남겨주십시오.!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map