웹사이트 검색

WordPress 웹사이트 재설계에 대한 팁

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

기본적이고 단조로운 WP 테마를 사용하고, 로고를 추가하고, 코드 몇 줄을 편집하고, CSS를 변경하고, 전문적이면서도 개성 넘치는 웹사이트를 즉시 만들 수 있습니다. 이는 쉬운 작업이며 이 튜토리얼에서는 그 방법을 보여줍니다.

준비 되었나요? 먼저 가장 중요한 것부터 시작하겠습니다. 색깔.

색 구성표 디자인

WordPress 사이트의 색 구성표를 개발할 때 고려해야 할 사항이 많이 있습니다. 집이나 석조 상점을 그리는 것으로 생각하십시오. 벽에 사용할 색상과 문에 사용할 색상을 결정해야 합니다.

외부와 내부를 페인트하는 방법은 개인 취향 등 몇 가지 요소에 따라 달라집니다.

WordPress 사이트를 색칠하는 것도 다르지 않습니다. 링크를 어떤 색으로 원하시나요? 귀하의 배경을 어떻게 가장 매력적으로 만들고 경쟁업체의 입을 벌리게 만들겠습니까? 어떤 색상이 귀하의 메시지를 보완하거나 힘을 실어줄까요? 텍스트를 어떻게 원하시나요? WP 사이트에서 사용할 수 있는 색상 선택에는 한계가 없습니다.

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

너무 과용하지 마세요. 그렇지 않으면 결국 마케팅 메시지가 그 모든 색상으로 희석될 것입니다. 무엇이든 과하면 독이 되기 때문에 어떤 색상을 선택하든 조화를 이루는 것이 중요합니다.

대다수의 사람들이 보고 좋아할 수 있는(희망적으로) 가장 많은 색상을 사용하는 것이 가장 좋습니다. 나는 귀하의 로고와 마스트헤드에 대해 이야기하고 있습니다. 이 영역은 정확히 가장 많은 색상이 필요한 곳입니다. 웹사이트의 나머지 부분은 덜 다채롭지만 더 많은 정보를 제공할 수 있습니다.

216가지 색상과 12가지 색상

우리 모두는 12가지 기본 색상에 익숙하지만 웹에는 다양한 색상과 다양한 색조가 있습니다. 그렇기 때문에 전문적인 룩을 연출하면서도 개인적인 따뜻함을 발산할 수 있는 색상을 선택하는 것은 어려운 작업이 될 수 있습니다.

그래도 운이 좋으셨네요. 인터넷을 뒤져 다음과 같은 도구를 찾았기 때문입니다.

쿨러

Kuler는 웹 개발자가 최고 수준의 색상 구성표를 만들 수 있도록 Adobe에서 설계했습니다. Kuler는 온라인 도구입니다. 즉, 휴대하고 어디에서나 사용할 수 있습니다. 또한 데스크탑에서 바로 색 구성표를 개발하는 데 도움이 되는 데스크탑 애플리케이션도 있습니다. 또한 Adobe ID가 있으면 한 번의 클릭으로 색 구성표를 저장할 수 있습니다.

단색, 복합, 보색, 유사 및 삼중조를 포함하여 Kuler와 함께 활용할 수 있는 다양한 색상 규칙이 있습니다.

쿨러를 확인해 보세요.

HTML 컬러 차트

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

HTML 색상 차트가 등장하는 곳입니다. 200개(실제로는 216개)가 넘는 웹 색상 코드가 포함된 다채로운 차트입니다. 차트로 무장하면 태양 아래 어떤 색상도 구현하기 어려울 것입니다.

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

HTML 색상 차트를 확인하세요.

제노팔

색상 선택에 도움이 필요하다면 GenoPal이 바로 여러분이 원하는 애플리케이션입니다. 이는 브라우저 창에 색상 팔레트를 "고정"하는 매우 간단한 웹 애플리케이션입니다. 색상을 선택하면 색상이 지정된 "스티커 메모" 형태로 브라우저에 표시됩니다. ?

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

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

컬러헥사

ColorHexa는 아티스트 페인트 플레이트의 온라인 버전입니다. 이 웹사이트에서는 색상 코드만 입력하여 색상을 혼합할 수 있습니다. 그들의 선행 앱은 색상 혼합 도구이지만 그라데이션 생성기와 색상 빼기도 있습니다. 여기서 일하는 것은 순수한 천재가 아닌가?

ColorHexa 블렌더는 어떻게 작동하나요? 여러분이 해야 할 일은 "+"로 구분된 색상 코드를 입력하는 것뿐입니다. 그러면 ColorHexa가 나머지 작업을 수행합니다. 예를 들어 다음을 시도했습니다.

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

ColorHexa를 확인해 보세요.

최고의 CSS 그래디언트 생성기

색상 그라디언트를 생성하는 데 있어 이는 아마도 최고의 도구일 것입니다. 이는 완전히 온라인이며 상쾌한 중간점과 해당 CSS 코드를 생성하는 데 도움이 됩니다. 또한 더 쉽고 빠르게 액세스할 수 있도록 브라우저에 앱을 통합할 수 있는 Chrome 및 Firefox 추가 기능도 제공합니다.

그라디언트를 볼 수 있는 미리보기 영역이 있으므로 적합하다고 판단되는 대로 그라디언트를 생성하고 생성된 CSS 코드를 복사하여 붙여넣기하면 됩니다. 정말 너무 쉽고 여러분이 사용하는 것보다 더 많은 색상이 있습니다.

Ultimate CSS Gradient Generator를 확인해 보세요.

글꼴 따기

이제 피카소처럼 색상을 선택하고 혼합하는 방법을 보여드렸으니 글꼴을 사용해 보겠습니다.

귀하의 색상과 웹 디자인은 사람들을 끌어들일 것이지만, 사람들을 붙잡게 만드는 것은 귀하의 말, 즉 귀하의 페이지와 게시물입니다.

우리는 항상 최고의 스토리를 만들기 위해 바쁘기 때문에 대부분의 사람들은 글꼴도 중요하다는 사실을 잊어버립니다. 그러나 선택한 글꼴은 사람들이 웹 사이트와 상호 작용하는 방식에 영향을 미칩니다. 올바른 글꼴을 사용하면 타겟 고객이 계속 머물기를 원할 것이며 결국에는 클릭하여 다른 페이지로 이동하게 될 것입니다. 이것이 바로 귀하가 원하는 것입니다. 약혼.

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

“글꼴을 가지고 노는 것은 불장난과 같습니다. 때로는 웹페이지에서 성냥불을 밝혀 예쁜 텍스트로 반짝일 수도 있습니다. 때로는 집 전체가 불타버릴 수도 있습니다.” – Cameraontheroad.com의 Lorelle.

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

다음은 좋은 예입니다.

#menu {font-family:Arial, Helvetica, Sans-serif, Verdana, "Times New Roman"; font-size: 0.8em; color:black;}

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

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

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

게다가 쉬운 작업이다.

style.css를 열고 상단에 다음 코드를 삽입하기만 하면 됩니다.

@font-face{font-family: Museo300; src: url("fonts/museo300-regular.ttf") format: ('truetype'); font-weight:normal;}

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

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

body{font-family:Museo300;}

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

#menu{font-family:Museo300;}

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

위의 방법은 글꼴을 다운로드하고 동일한 것을 서버에 업로드해야 함을 의미합니다. 저에게 묻는다면 꽤 지루한 작업입니다.

그러나 사용하려는 외부 글꼴을 다운로드할 필요는 없습니다.

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

<link href="http://fonts.googleapis.com/css?family=over+the+rainbow" rel="stylesheet" type="text/css"/>

위의 줄을 어떻게, 어디에 추가합니까? WordPress 관리 패널 –> 모양 –> 편집기 –> header.php를 열어야 합니다.

header.php 파일을 편집하고 싶지 않거나 편집할 수 없는 경우 style.css에 다음 줄을 입력하여 글꼴을 가져오세요.

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

위의 예를 사용하면 사이트 어디에서나 Google의 Over The Rainbow 글꼴을 사용할 수 있습니다. 예를 들어 웹사이트 전체에서 Over The Rainbow를 사용하려면 다음 코드를 사용할 수 있습니다.

body{font-family:"Over The Rainbow";}

Google은 600개 이상의 무료 글꼴 모음을 제공하므로 마음껏 즐겨보세요!

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

글꼴 추가를 위한 WordPress 플러그인

코드를 자세히 다루고 싶지 않은 사람들은 언제든지 WordPress 플러그인을 설치하여 무거운 작업을 수행할 수 있습니다. WordPress.com에서 가장 인기 있는 무료 글꼴 플러그인은 다음과 같습니다.

  • WP 구글 글꼴
  • 글꼴 – 공식 웹폰트 플러그인
  • 모든 글꼴 사용

당신은 재미? 계속하자…

날짜 및 시간 형식 지정

귀하의 사이트와 관련하여 완전히 멍청한 것 같은 느낌을 줄 정도로 정말 멋진 톤으로 날짜나 시간을 표시하는 WordPress 사이트에 가본 적이 있습니까? 이 사이트의 소유자는 단지 단 한 줄의 코드를 가지고 놀았고 이제 귀하는 그들의 날짜를 충분히 알 수 없습니다. ㅋ.

좋은 소식은 이 코드 줄을 수정하여 독자도 놀라게 할 수 있다는 것입니다.

WP 대시보드에서 아래와 같이 외관으로 이동한 다음 편집기로 이동합니다.

거기에 도달하면 맨 오른쪽에 .php 파일 목록이 표시됩니다.

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

the_time

다음과 같은 줄을 즉시 발견할 수 있습니다.

<?php the_time('F Y'); ?>

이제 수정하려는 영역은 ('F Y')입니다.

이 섹션을 구체화하여 좀 더 다채롭게 즐길 수 있는 내용을 제공하겠습니다.

('F Y')의 "F"는 월의 전체 이름을 나타내고 "Y"는 4자리 연도를 나타냅니다. 따라서 ('F Y')를 사용하면 날짜는 다음과 같습니다.

September 2013

F와 Y 사이에 쉼표를 넣으면 다음과 같아야 합니다.

September, 2013

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

l=요일 전체 이름(소문자 L)

F=월

j=해당 월의 일자(날짜)

Y=4자리 연도

y=2자리 연도

아래 표에서 더 많은 문자를 확인할 수 있습니다.

다음은 몇 가지 예입니다.

항상 대괄호('F Y') 안의 문자만 수정하고 참고하고 작은따옴표를 삭제하지 마세요. . 원하는 효과를 얻으려면 원하는만큼 많은 문자를 사용하고 완료되면 모든 것을 저장하는 것을 잊지 마십시오.

게다가 삭제하면 날짜도 지울 수 있습니다…

<?php the_time ('F Y') ?>

...얼마 전 제 블로그에서 했던 것처럼요. ? 이제 내가 얻는 것은 프레드가 게시한 이런저런 카테고리… 어쩌구 저쩌구뿐입니다. 날짜가 전혀 없습니다.

다음 부분을 위해 힘이 나시나요? 당신은 더 나은 것입니다.

the_time 함수를 찾지 못하셨나요?

괜찮습니다. 요즘에는 많은 테마에서 the_time() 함수 대신 the_date() 함수를 사용하고 있는데, 이는 실제로 더 나은 방법입니다. 테마가 the_date() 기능을 사용하는 경우 "설정->일반"에서 대시보드에 데이터가 표시되는 방식을 간단히 변경할 수 있으므로 편집할 필요가 없습니다.

이미지 사용

이것은 아마도 이 튜토리얼에서 가장 쉽고 짧은 부분일 것입니다. 하지만 WordPress를 처음 사용하는 경우 이미지를 추가하는 것이 어려울 수 있습니다.

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

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

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

이미지 추가에 대해 자세히 알아보려면 다음 리소스를 확인하세요.

  • WordPress: 이미지 사용
  • 테마 디자인(이미지 추가)
  • 이미지 크기 및 품질
  • WordPress 이미지 최적화
  • WordPress에서 이미지 편집하기

멋진 무료 이미지를 어디서 찾을 수 있는지 잘 모르겠다면, WordPress에 가장 적합한 이미지 리소스를 다룬 우리가 작성한 게시물을 확인하세요.

보다? 가장 짧을 거라고 말씀드렸죠 ?

파비콘 추가

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

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

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

파비콘을 만드는 방법

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

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

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

  • 이미지가 정사각형이 되도록 적절히 공간을 자르거나 추가하세요.
  • 이미지 크기를 16 X 16 픽셀로 조정하고
  • 이미지를 favicon.ico로 저장합니다.

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

  • 실제 파비콘 생성기
  • 다이내믹 드라이브

파비콘을 만든 후에는 컴퓨터에 다운로드할 수 있으므로 걱정하지 마세요.

WordPress에 파비콘을 설치하는 방법

테마의 기본 폴더에 다른 파비콘이 있는 경우 FTP 클라이언트 또는 사용 가능한 방법을 사용하여 이를 삭제해야 합니다. FTP 클라이언트는 사용하기 쉽고 원하는 파일을 빠르게 찾을 수 있기 때문에 권장됩니다.

이 튜토리얼에서는 faviconer.com을 사용하여 블로그용 파비콘을 만들고 Filezilla를 사용하여 기존 파비콘을 삭제했습니다.

favicon.ico 파일을 사용하여 동일한 파일을 테마의 기본 폴더에 업로드하세요. 현재 테마가 저장되는 폴더입니다.

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

업로드가 완료되면 favicon.ico를 작동시킬 차례입니다. 당신이 해야 할 일은 다음과 같습니다:

플러그인을 사용하여 파비콘 추가하기

파비콘을 추가하는 가장 좋은 방법은 플러그인을 사용하는 것입니다. 매우 간단한 접근 방식을 위한 고급 사용법을 위해 "All In One Favicon" 플러그인을 사용하는 것이 좋습니다. 백엔드 옵션이 없는 "The Simplest Favicon" 플러그인을 사용할 수 있으며 favicon이라는 파일을 업로드하기만 하면 됩니다. ico를 서버의 올바른 위치에 배치하세요.

템플릿에 파비콘을 수동으로 추가하기

어떤 사람들은 (최선의 방법은 아니지만) 파비콘을 템플릿에 수동으로 추가하는 것을 선호할 수도 있습니다. 이렇게 하려면 다음 단계를 따르세요.

  • 대시보드에 로그인하세요.
  • 외관으로 이동합니다.
  • 그런 다음 편집기(테마 편집기)로
  • header.php(헤더) 파일을 찾아 엽니다.

헤더 파일에 다음 줄을 추가하세요(다른 태그가 보이는 상단에 추가하는 것이 좋습니다).

<link rel="shortcut icon" href="<? php echo gets_stylesheet_directory_uri(); ?> /favicon.ico"/>

완료되면 저장하세요.

새로운 변경 사항을 보려면 브라우저를 새로 고치세요.

이제 색상을 변경하고, 더 나은 글꼴을 선택하고, 날짜 및 시간 형식을 지정하고, 이미지를 사용하고, 파비콘을 추가할 수 있습니다.

결론

WordPress 사이트 재설계에 대해 논의할 내용이 너무 많아서 단일 게시물에서 모든 내용을 다루려고 시도하는 것은 (귀하에게) 해로울 수 있습니다.

가장 많은 이점을 얻으려면 튜토리얼을 여러 부분으로 나누는 것이 가장 좋습니다(1부). 날이 갈수록 더 많은 재설계 요령을 공유할 예정이니 계속 지켜봐 주시기 바랍니다. 이 튜토리얼의 목적은 최고의 WordPress 사이트를 만들고 스스로 모든 작업을 수행했기 때문에 더 행복한 느낌을 갖도록 돕는 것입니다.

의견을 공유하고 싶거나 토론에 뭔가를 추가하고 싶다면 아래 댓글 섹션에 자유롭게 의견을 남겨주세요!