태그 보관물: 워드프레스

워드프레스 Font Awesome으로 인포그래픽 아이콘 사용하기

작성일자 글쓴이
응답

워드프레스에서 폰트 어썸 (Font Awesome)을 적용하고, 인포그래픽 아이콘을 배치할 수 있습니다. Font Awesome는 아이콘으로 이루어진 폰트라고 생각하면 됩니다. 이 아이콘은 모든 브라우저에서 호환이 되며, 그림처럼 보이지만 속도가 빠르다는 장점이 있습니다. 그리고 벡터방식이라 크게 확대해도 깨지지 않습니다. 현재 제 블로그의 스크롤 업 아이콘이 Awesome 폰트를 적용한 것입니다.

 

워드프레스에서 Font Awesome 적용하기

사용중인 테마의 header.php 내 <head>와 </head> 사이에 아래 소스를 넣어주세요. Font Awesome 공식 사이트를 참고했습니다.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css" />

 

Font Awesome 사용하기 – 페이지

Font Awesome 사이트의 아이콘 메뉴에서 사용할 아이콘을 찾을 수 있습니다. 링크는 무료 카테고리로 되어 있습니다. 아이콘 중에 회색으로 보이는 아이콘은 유료 아이콘이니 주의하시기 바랍니다.

 

원하는 아이콘을 클릭해서 들어가면 코드가 보이는데, 클릭하면 바로 클립보드로 복사가 됩니다.

 

혹은 Font Awesome의 다른 페이지를 보시면 위 그림과 같이 전체 리스트 형태로 보이는 페이지가 있습니다.

 

원하는 곳에 소스를 붙여 넣거나, 아이콘 클래스명을 확인 후에 아래 소스에 아이콘 클래스명을 넣어 줍니다.

<i class="fa fa-아이콘 클래스명"></i>

 

제가 적용한 위로 올라가는 화살표는 아래와 같이 적용했습니다.

<i class="fa fa-angle-up fa-2x"></i>

 

아이콘의 크기는 속성을 아래와 같이 추가해주면 됩니다. 속성을 추가하지 않으면 원래 크기로 나옵니다.

  • fa-lg: 33% 크기
  • fa-2x: 2배 크기
  • fa-3x: 3배 크기
  • fa-4x: 4배 크기
  • fa-5x: 5배 크기

 

회전하는 아이콘을 적용하려면, 클래스명 뒤에 아래 속성을 추가하면 됩니다.

  • fa-spin fa-fw

 

Font Awesome 사용하기 – CSS

페이지에 직접 적용하지 않고, CSS로도 처리 할 수 있습니다.

현재 블로그에 적용되어 있는 리스트 이전 버튼의 CSS를 보겠습니다.

.prev.page-numbers:before {
	content: '\f053';
	font-family: "Font Awesome 5 Free";
	margin-left: 0;
	margin-right: 5px;
}

content: \f053은 아이콘 코드명입니다. 역슬래쉬 뒤에 코드명을 넣어 주시면 됩니다. 그리고 폰트 어썸 5버전에서 유의하실 점은 font-family에 “Font Awesome 5 Free“를 넣어 주셔야 합니다. 기존 4버전은 “Awesome”만 넣었던 것과는 차이가 있습니다.

 

워드프레스 구글 애드센스 숏코드 만들기 – 플러그인 사용 안함

작성일자 글쓴이
응답

워드프레스의 장점 중에 하나는 숏코드를 이용해서 긴 내용도 짧게 넣을 수 있다는 것입니다. 워드프레스는 이용하는 이유 중에 하나가 구글 애드센스일텐데요. 애드센스 코드를 플러그인 없이 숏코드로 만들어서 사용할 수 있습니다.

 

header.php 파일에 추가

우선 애드센스 광고 코드에서 공통적으로 사용되는 스크립트를 본인이 사용하는 테마의 header.php에 추가합니다. 파일 수정은 워드프레스 관리자 내 ‘테마디자인 > 테마 편집기‘를 통해서 해도 되고, 따로 에디터 프로그램을 사용해도 됩니다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

위 코드를 header.php 내 <head>와 </head> 사이에 넣어 줍니다.

 

functions.php 파일에 추가

본인이 사용하는 테마의 functions.php 파일 내 아래와 같은 코드를 추가합니다.

function display() {
    return '<ins class="adsbygoogle"
		style="display: block;"
		data-ad-client="ca-pub-pub code"
		data-ad-slot="1234567890"
		data-ad-format="auto"
		data-full-width-responsive="true"></ins>
	<script>
		 (adsbygoogle = window.adsbygoogle || []).push({});
	</script>';
 }
add_shortcode('adsense', 'display');

여기서 function 뒤에 있는 display() 는 다른 함수와 겹치면 안됩니다. 마지막 줄에서 ‘adsense’가 숏코드, ‘display’는 위에서 선언한 함수와 동일한 단어가 들어가 있어야 합니다.

[adsense]

이제 위의 숏코드를 넣어주면, 그 위치에 구글 애드센스 광고가 노출됩니다.

블루호스트에 워드프레스 설치하기 – 5. 워드프레스 수동 설치

작성일자 글쓴이
응답

블루호스트(Bluehost)에 워드프레스 설치하기 중 워드프레스 수동 설치입니다. 블루호스트에 워드프레스 설치하기 이전 내용을 보시려면, 아래 링크를 확인하세요.

블루호스트 워드프레스 전용 호스팅에서는 간단하게 클릭 몇 번으로 워드프레스를 설치할 수 있습니다. 하지만 자동 설치를 할 경우 Bluehost와 Japack 플러그인이 설치되어 있습니다. 비활성하고 삭제하면 그만이지만 DB 명부터 시작해서 깔끔하게 내가 원하는 버전으로 설치하고 싶다면 수동 설치를 해야 합니다. 여기서는 블루호스트에 워드프레스를 수동으로 설치하는 방법에 대해서 정리했습니다.

 

블루호스트 Database 생성

블루호스트 왼쪽 메뉴에서 ‘Advanced > DATABASES‘ 항목에서 ‘MySQL® Databases‘를 클릭합니다.

 

MySQL® Databaes 페이지입니다. 제일 위에 Create New Database 항목이 보입니다. New Database에 신규 데이터베이스 이름을 영문으로 입력해주세요. 앞에 보이는 ‘namchab1_’은 고정 머리말입니다. 그리고 [Create Database] 버튼을 클릭합니다.

 

데이터베이스가 생성되었습니다. 데이터베이스명은 머리말 포함해서 ‘namchab1_wp_manual’이 되었습니다.

 

아래쪽에 Current Databases 리스트에 새로 추가한 데이터베이스가 보입니다.

 

이제 MySQL Users에서 사용자를 추가해줍니다. Username 항목에 사용자 아이디를 영문으로 입력해 주세요. 역시 ‘namchab1_’은 고정 머리말입니다. 비밀번호와 비밀번호 확인까지 입력하시고, [Create User] 버튼을 클릭합니다.

 

신규 유저도 생성이 되었습니다. 신규 사용자 명은 머리말을 포함해서 ‘namchab1_rapsso’가 되었습니다.

 

아래 Current Users 리스트에서 추가한 사용자가 보입니다.

 

이제 새로 만든 사용자에게 권한을 줄 차례입니다. Add User To Database 부분에서 새로 만든 사용자와 데이터베이스를 선택합니다. [Add] 버튼을 클릭하세요.

 

데이터베이스의 권한을 선택하는 화면이 보입니다. ‘ALL PRIVILEGES’에 체크를 하면 모든 권한에 체크가 됩니다. [Make Changes] 버튼을 클릭하세요.

 

데이터베이스의 모든 권한이 부여되었습니다.

 

워드프레스 파일 FTP 업로드

우선 워드프레스 한국어 공식 홈페이지로 가서 워드프레스 파일을 다운로드받으세요. 그리고 이 과정을 진행하기 전에 ‘블루호스트에 워드프레스 설치하기 – 3. FTP 설정‘ 편을 먼저 보시는 것을 추천합니다. FTP에 접속해서 public_html 폴더에 접근했다는 가정하에 설명 들어갑니다.

파일질라 실행 후 public_html 폴더로 들어가시면, 서브 도메인으로 생성했던 manual 폴더가 보입니다. 본인이 설치할 폴더를 찾으세요. 서브 도메인이 아닌, 메인 도메인에 설치를 원하신다면 public_html 폴더에서 진행하면 됩니다. 저는 manual.namchabab.com으로 진행할 예정이라 manual 폴더로 들어갑니다.

 

폴더 내 있는 파일이나 폴더는 모두 삭제하세요.

 

위에서 다운로드받은 워드프레스 파일의 압축을 푸신 후, 모든 파일을 해당 FTP로 드래그합니다. 업로드는 시간이 좀 걸리는 편입니다.

 

모든 파일이 업로드되고 난 후에, ‘wp-config-sample.php’ 파일명을 ‘wp-config.php’로 변경해주세요. 그리고 ‘wp-config.php’ 파일을 html 편집기를 통해서 열어줍니다.

 

wp-config.php 파일 내에 위와 같은 부분이 있습니다. 여기에 우리가 만들어줬던 데이터베이스명, 사용자 명, 사용자 비밀번호를 입력해줍니다.

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define( 'DB_NAME', '데이터베이스명' );

/** MySQL database username */
define( 'DB_USER', '사용자 명' );

/** MySQL database password */
define( 'DB_PASSWORD', '사용자 비밀번호' );

/** MySQL hostname */
define( 'DB_HOST', 'localhost' );

/** Database Charset to use in creating database tables. */
define( 'DB_CHARSET', 'utf8' );

/** The Database Collate type. Don't change this if in doubt. */
define( 'DB_COLLATE', '' );

이제 워드프레스 설치를 위한 모든 준비가 끝났습니다.

 

워드프레스 설치

수정한 내용이 저장되었다면, 워드프레스 파일을 업로드한 도메인으로 접속합니다. 도메인만 입력하시면 뒤에 ‘/wp-admin/install.php’는 자동으로 붙습니다.

 

워드프레스 설치 첫 화면입니다.

  • 사이트 제목: 사이트 제목을 입력하세요. 관리자에서 변경 가능합니다.
  • 사용자명: 워드프레스 관리자 아이디를 입력하세요.
  • 암호: 워드프레스 관리자 로그인 비밀번호를 입력하세요.
  • 이메일 주소: 본인의 이메일 주소를 입력하세요.
  • 검색 엔진 접근 여부: 체크하지 마세요. 테스트용으로 설치할 경우에는 체크하셔도 됩니다.

위 항목이 모두 입력되었으면, [워드프레스 설치하기] 버튼을 클릭하세요.

 

바로 이런 화면이 나옵니다. 워드프레스 설치가 완료되었습니다. [로그인] 버튼을 클릭하세요.

 

워드프레스 설치 첫 화면에서 입력했던 관리자의 아이디와 비밀번호를 입력하시고 [로그인] 버튼을 클릭하세요.

 

워드프레스에 오신 것을 환영합니다! 블루호스트에 워드프레스 수동 설치하기가 완료되었습니다.

 

블루호스트의 ‘My Sites’로 가보시면, 수동으로 설치한 워드프레스도 함께 보이는 것을 확인할 수 있습니다.

블루호스트에 워드프레스 설치하기 – 4. 워드프레스 자동 설치

작성일자 글쓴이
응답

블루호스트(Bluehost)에 워드프레스 설치하기 중 워드프레스 자동 설치입니다. 블루호스트에 워드프레스 설치하기 이전 내용을 보시려면, 아래 링크를 확인하세요.

블루호스트 워드프레스 전용 호스팅에서는 간단하게 클릭 몇 번으로 워드프레스를 설치할 수 있습니다. 블루호스트에 워드프레스를 수동으로 설치하고 싶은 분은 ‘블루호스트에 워드프레스 설치하기 – 5. 워드프레스 수동 설치‘편을 보시기 바랍니다.

블루호스트 워드프레스 자동 설치

왼쪽 메뉴에서 ‘My Sites‘로 갑니다. 가입할 때 자동으로 만들어진 워드프레스 하나가 보입니다. 오른쪽 위에 [Create Site] 버튼을 클릭합니다.

 

워드프레스 만들기 페이지로 이동됩니다. 설치될 워드프레스의 정보를 입력하는 페이지입니다. 사진에서 빨간색 박스는 기본값입니다. Site Name은 필수 값이며, Site Tagline은 선택 값입니다. 아래에 보이는 Advanced를 클릭하면 파란색 박스의 항목이 확장됩니다. 입력하지 않아도 되는 값이고, 이메일 주소, 워드프레스 관리자 아이디, 관리자 비밀번호를 입력할 수 있습니다. 사이트 이름을 입력했다면 [Next]를 클릭합니다.

 

도메인 선택 페이지입니다. Domain 부분에서 어떤 도메인에 워드프레스를 설치할 것인지 선택할 수 있습니다. 드롭박스를 누르면 등록된 서브 도메인 리스트가 보입니다.

 

저는 auto ~ 도메인을 선택했습니다. Directory 항목은 비워 놓아도 됩니다. 아래 파란 박스에 있는 Helpful Free Plugins는 모두 체크 해제해 주세요. (필요 없는 플러그인입니다.) [Next] 버튼을 클릭해주세요.

 

워드프레스 설치가 완료되었습니다. 아주 간단하죠? 정말 허무할 정도로 클릭 몇 번에 워드프레스 설치가 완료되었습니다. Username은 기존 워드프레스에서 사용하던 계정으로 생성이 되었습니다. 비밀번호는 [Show]를 클릭하면 볼 수 있지만 임의로 생성한 비밀번호라서 변경하시면 됩니다.

 

설치 후 언어 변경 및 관리자 비밀번호 변경

다시 ‘My Sites‘로 들어가 보시면 새로운 워드프레스가 생성되어 있습니다. 근데 저만 이런 현상이 생기는지는 잘 모르겠으나, 한글이 깨져서 보입니다. 이제 워드프레스 관리자로 가서 변경해 줄 예정입니다.

 

자동으로 설치된 워드프레스 박스에 마우스 커서를 올리면 위와 같이 [Manage Site]와 [Log Into WordPress] 버튼이 보입니다. 아래의 [Log Into WordPress] 버튼을 클릭합니다. 별도의 로그인 정보 입력 없이 바로 해당 워드프레스의 관리자 페이지로 이동하는 버튼입니다.

워드프레스 관리자 페이지로 들어가면 모두 영어로 나오는 것을 볼 수 있습니다. 왼쪽 메뉴에서 ‘Settings > General‘로 들어갑니다.

 

General Settings 페이지에서 아래쪽에 보시면 Site Language 항목이 있습니다. ‘한국어’를 선택해줍니다. 한국어 선택 후 제일 아래에 있는 [Save Change] 버튼을 클릭해야 변경사항이 저장됩니다.

 

설정이 저장되었고, 모든 메뉴가 한글로 변경되었습니다. 이제 한글이 깨지던 부분을 수정해 줍니다. 사이트 제목과 태그 라인을 한글로 다시 입력해 줍니다.

 

블루호스트의 ‘My Sites’ 페이지에서 한글이 제대로 나오는 것을 확인할 수 있습니다.

 

워드프레스 설치 시 임의로 생성되었던 관리자 비밀번호도 변경해 줍니다. 이 과정은 사이트 정보 입력 시 Advanced에서 관리자의 아이디 및 비밀번호를 입력하신 분들은 하지 않아도 되는 과정입니다. 워드프레스 관리자에서 왼쪽 메뉴의 ‘사용자 > 나의 프로필‘로 들어갑니다.

 

프로필 페이지 아래쪽에 보시면 사용자 관리 부분에 새 비밀번호 항목이 있습니다. [암호 생성] 버튼을 클릭하면 새로운 암호를 입력할 수 있는 텍스트 박스가 나옵니다. 새로운 비밀번호를 입력하신 후에 아래에 보이는 [프로필 업데이트] 버튼을 클릭하시면 새로운 암호로 로그인 정보가 저장됩니다.

블루호스트에 워드프레스 설치하기 – 3. FTP 설정

작성일자 글쓴이
응답

블루호스트(Bluehost)에 워드프레스 설치하기 세 번째, 블루호스트 FTP 설정입니다. 블루호스트에 워드프레스 설치하기 이전 내용을 보시려면 아래 링크를 확인하세요.

블루호스트는 FTP 계정을 생성 후 FTP를 사용할 수 있습니다. 블루호스트 워드프레스 호스팅에서 사실 FTP 접속은 크게 필요 없을 수도 있습니다. 하지만 워드프레스를 수동으로 설치하거나, 커스텀 테마나 플러그인을 업로드하기 위해서는 FTP 접속이 필요한 경우도 있습니다. 방법은 아주 간단하니, 아래 내용을 확인해주세요.

블루호스트 FTP 계정 생성

왼쪽 메뉴에서 ‘Advanced > FTP‘를 클릭합니다. Advanced는 C 패널(C-panel)이라고도 부릅니다.

 

Add FTP Account 입력 폼이 보입니다.

  • Log In: FTP 로그인 시 사용할 아이디를 입력합니다. 로그인 아이디는 ID@Domain Name입니다.
  • Domain: FTP 로그인 시 사용할 도메인을 선택합니다. 서브 도메인이 만들어져 있다면 선택할 수 있지만, 메인 도메인을 하시면 모두 접근 할 수 있습니다.
  • Password: FTP 로그인 시 사용할 비밀번호입니다.
  • Password (Again): FTP 로그인 비밀번호 확인입니다. 동일하게 한 번 더 입력하세요.
  • Directory: 디렉터리는 한정하지 않아야 모두 접속 가능합니다. 자동으로 입력된 텍스트를 모두 삭제해 주세요.

모두 입력이 되었으면, [Create FTP Account] 버튼을 클릭합니다.

 

Account Created 라고 안내 문구가 나오면서, 아래에 FTP 계정이 생성된 것을 확인할 수 있습니다.

 

블루호스트 FTP 접속

파일질라를 실행합니다. 파일질라 다운로드 및 설치 방법은 ‘닷홈에 워드프레스 설치하기 – 2. 워드프레스 설치‘ 편을 참고하세요.

호스트 부분에 도메인과 사용자명(ID@도메인), 비밀번호를 입력합니다. 포트는 비워놓으셔도 됩니다. [빠른 연결] 버튼을 클릭합니다.

 

알 수 없는 인증서 팝업이 보이는데요. ‘호스트명이 인증서와 일치하지 않음’이라고 무섭게 빨간 글씨로 적혀 있습니다. 무시하셔도 됩니다. ‘이후 세션에서 항상 인증서 신뢰’에 체크를 하시면 다음부터 이 창을 안 볼 수 있습니다. [확인]을 클릭합니다.

 

블루호스트 FTP에 접속이 되었습니다. 다른 폴더는 건드리지 마시고, public_html 폴더로 들어가시면 설정된 도메인의 root 폴더로 접근할 수 있습니다. 이후 워드프레스 수동 설치에 대한 내용은 다음 포스트를 참고하세요.

블루호스트에 워드프레스 설치하기 – 2. 도메인 설정

작성일자 글쓴이
응답

블루호스트(Bluehost)에 워드프레스 설치하기 두 번째 포스트입니다. ‘블루호스트 가입 및 결제‘는 이전 포스트를 보시면 됩니다. 이번에는 도메인 관련된 설정을 해보겠습니다. 타사에서 구매한 메인 도메인의 네임 서버(Name Server) 변경과 서브 도메인 생성 방법을 정리했습니다. 블루호스트 가입 시 1년간 무상으로 제공하는 도메인으로 만드신 분들은 네임 서버 부분은 건너 뛰셔도 됩니다.

목차

 

도메인 네임 서버 변경

※ 블루호스트 가입 시 무료로 받은 도메인일 경우 네임 서버 부분은 건너 뛰셔도 됩니다.

타사에서 구매한 도메인의 경우 네임 서버를 블루호스트 네임 서버로 변경해야 도메인 연결이 가능합니다. 왼쪽 메뉴에서 ‘Domains‘ 메뉴로 가시면, 오른쪽과 같이 가입 시 입력한 도메인을 볼 수 있습니다. 여기서 오른쪽에 [Manage] 버튼의 ▼ 부분을 클릭하면 아래로 메뉴가 나옵니다. 여기서 ‘Name Servers‘를 클릭합니다.

 

도메인의 상세 정보를 보여주는 페이지가 나옵니다. 아래를 보시면 빨간색 박스 부분에 블루호스트의 네임 서버 이름과 IP 주소를 확인할 수 있습니다.

 

이제 본인이 구매한 도메인 서비스로 접속을 합니다. 저는 가비아에서 도메인을 구매했기 때문에 가비아를 기준으로 설명하겠습니다. 네임 서버 설정 메뉴로 들어가시면 위와 같은 화면을 볼 수 있습니다. 가비아는 호스트 명만 입력하게 되어 있는데, IP 주소를 입력하는 서비스도 있으니 어떤 값을 입력해야 하는지 잘 확인하세요. 기본값으로 가비아의 네임 서버가 입력되어 있습니다.

 

호스트 명 부분에 블루호스트 네임 서버값을 입력한 후 [적용] 버튼을 클릭합니다. 제대로 입력했다면 수 분 내에 해당 도메인으로 정상 접속 가능합니다.

 

블루호스트 서브 도메인 생성

왼쪽 메뉴에서 ‘Domains > Subdomains‘ 메뉴로 들어갑니다.오른쪽에서 원하는 서브 도메인명을 영문으로 입력 후, [Create]를 클릭합니다. 파란색 박스는 서브 도메인 명을 입력하면 자동으로 입력됩니다. FTP로 접속 시 폴더명으로 구분되는 부분이라 서브 도메인명과 동일하게 맞추는 게 좋습니다.

 

서브 도메인이 만들어졌다고 나옵니다.

 

다시 서브 도메인 메뉴로 가보시면 정상적으로 생성된 것을 확인할 수 있습니다. 저는 워드프레스 자동 설치, 수동 설치 각각 서브 도메인으로 진행할 예정이라 서브 도메인을 2개 만들었습니다. 각각 서브 도메인별로 워드프레스를 설치할 수 있고, 개별로 운영할 수 있습니다. 용도에 따라서 서브 도메인을 생성하여 운영하시면 됩니다.

블루호스트에 워드프레스 설치하기 – 1. 블루호스트 가입 및 결제

작성일자 글쓴이
1

블루호스트(Bluehost)는 워드프레스를 사용하는 분 중에 많이 이용하시는 외국 호스팅입니다. 블루호스트에서는 워드프레스 전용 호스팅 상품이 있으며, 워드프레스 자동설치가 지원됩니다. 몇 번의 클릭으로 아주 간편하게 워드프레스 사이트를 생성할 수 있습니다. 블루호스트에 워드프레스 설치하기 시리즈는 블루호스트 가입 및 결제, 워드프레스 자동 설치, 워드프레스 수동 설치 등으로 연재할 예정입니다. 그 첫 번째로 1. 블루호스트 가입 및 결제를 알아보겠습니다.

블루호스트의 워드프레스 전용 호스팅을 기준으로 설명하겠습니다.

블루호스트 가입 및 결제

우선 블루호스트 사이트로 이동합니다. 메인에서 ‘The Best Web Hosting’이라는 제목으로 크게 보입니다. 여기서 보이는 호스팅은 워드프레스 전용 호스팅입니다. 아래의 [Get Started] 버튼을 눌러줍니다.

 

상품 선택

위와 같이 4가지 상품이 준비되어 있습니다. 세 번째에 Choice Plus가 추천 상품으로 표시되고 있습니다. 아무래도 추천하는 이유가 있겠죠. 잘 보시면 Plus와 Choice Plus는 가격이 동일한데, Choice Plus에서는 Domain Privacy + Protection과 Site Backup을 지원합니다. Choice Plus 아래의 [Select] 버튼을 클릭합니다.

 

도메인 입력

도메인을 입력하는 페이지가 보입니다. 블루호스트에서는 도메인을 1년간 무상 지원합니다. 새로운 도메인을 만드시려면 빨간색 박스에 도메인을 입력하시면 됩니다. 도메인 입력 전에 가비아 등에서 사용 가능한 도메인인지 먼저 확인을 하시기 바랍니다. 도메인을 이미 가지고 있다면 오른쪽 녹색 박스에 본인의 도메인 주소를 입력하면 됩니다. 나중에 도메인을 만드시려면 아래쪽 보라색 박스에 있는 I’ll create my domain later을 클릭하시면 됩니다. 도메인을 입력했으면 [Next] 버튼을 클릭합니다.

 

정보 입력

정보입력 부분입니다. 영어로 되어 있지만, 간단한 정보를 입력받는 부분입니다. 어렵게 생각할 것 없이 위 사진을 참고해서 영문으로 입력하시면 됩니다. Country는 Korea, Republic of로 선택하시면 됩니다.

주의하실 부분이 Postal Code 부분인데요. 우리나라는 우편번호가 5자리로 바뀌었는데, 여기에서는 구 우편번호 6자리로 입력해야 합니다. 구 우편번호 검색을 통해서 검색할 수도 있지만, 귀찮으니까 그냥 000000을 입력합시다. (혹시 000000을 입력했는데, 잘못된 우편번호라는 문구가 나온다면 신주소로 체계가 변경된 것이니 5자리 우편번호를 입력하시면 됩니다.)

Phone Number 부분에 Ext 는 입력하지 않으셔도 됩니다.

 

상품 결제 기간 선택

정보 입력을 다 하시고, 아래로 스크롤을 내리시면 상품 결제 기간과 패키지를 선택할 수 있는 항목이 보입니다. 우선 Package Extras는 모두 필요 없는 부분이니 체크 해제하도록 합시다.

 

Account Plan에서 몇 년 결제할 것인지 선택할 수 있습니다. 1년, 2년, 3년을 선택할 수 있는데요. 기간이 길수록 월 결제 금액이 줄어듭니다. 1년 결제 시 7.97달러, 3년 결제 시 5.95달러입니다.

 

결제 정보 입력

제일 아래쪽으로 스크롤을 내리면 결제 정보를 입력하는 항목이 나옵니다. 해외결제가 가능한 카드 번호를 붙여서 입력해주시면 됩니다. CVV 번호와 카드 유효기간을 입력합니다. 약관 동의에 체크해주시고 [submit] 버튼을 클릭하면 결제가 진행됩니다. 위에 입력한 항목 중에 잘못된 부분이 있으면 빨간색 글씨로 안내가 됩니다. 입력했던 값을 다시 입력해야 할 수도 있으니 모두 잘 입력되었는지 확인 후 버튼을 클릭하시기 바랍니다.

 

가입 및 결제 완료

결제가 완료되었다는 페이지를 볼 수 있습니다. 아래쪽에 결제 내역이 보입니다. 중간에 [Create Account]를 클릭합니다.

 

결제 완료 후 로그인

이런 화면이 보일 때도 있고 아닐 때도 있습니다. [go to login] 버튼을 누르면 되겠죠.

 

계정을 만드는 화면입니다. 도메인명이 아이디가 됩니다. 비밀번호를 입력해야 하는데요. ‘영문 대문자 + 영문 소문자 + 숫자 + 특수기호‘ 조합으로 입력하셔야 합니다. 규칙에 잘 맞춰서 입력하신 후에 약관 동의 체크하시고 [Create Account] 버튼을 클릭합니다.

 

계정 생성 후에 바로 이렇게 웹사이트 만들기 마법사 창이 나옵니다. 건너뛰셔도 무방합니다.

 

간단한 설문조사 창 같은 것도 보이고요. 앞에서 스킵하셨으면 안 보이는 창입니다.

 

테마를 바로 선택할 수 있는 페이지가 나오는데요. 우선 건너뛰겠습니다.

 

회원가입까지 모두 완료되었습니다. 로그인 후 첫 화면입니다. 고생하셨습니다.

사진에서 표시한 부분에 입력한 도메인이 아닌 임의의 주소로 되어 있는데요. 저는 재로그인을 하니, 가입 시 입력했던 도메인으로 설정이 되어 있었습니다. 추후에 도메인 변경 방법도 함께 포스팅 하도록 하겠습니다.

 

My Sites를 누르면 이미 워드프레스 사이트가 하나 만들어져 있습니다. [Manage Site]를 클릭하면 사이트 상세 설정을 할 수 있습니다. [Log inito WordPress]를 클릭하면 워드프레스 관리자 페이지로 바로 이동됩니다.

 

추후에 블루호스팅 로그인 시 위와 같이 도메인 명과 설정한 비밀번호를 입력하시면 됩니다.

워드프레스 고전 에디터 기본 폰트 변경 – TinyMCE

작성일자 글쓴이
응답

워드프레스를 처음 접하는 분들이 제일 적응 못하는 부분이 에디터에서 한글 폰트가 제대로 나오지 않아서 글 작성할 때와 실제로 발행했을 때의 괴리감이라고 생각합니다. 발행되는 화면 그대로 에디터에서 보여줄 수 있다면 좀 더 친근하게 포스팅을 할 수 있을거라 생각합니다. 여기서는 워드프레스 에디터 플러그인으로 많이 사용하는 TinyMCE Advanced를 기준으로 에디터 내에 기본 폰트 변경하는 방법을 알려드립니다. 고전 에디터를 사용하시는 분들에게 해당되는 사항입니다.

TinyMCE Advanced 기본 폰트 변경하기

기본적으로 아무것도 적용하지 않은 상태입니다. 기본 폰트는 ‘Georgia’로 되어 있습니다. 에디터 폰트 리스트에 한글 폰트 자체가 없어서 이렇게 보입니다. 이제 기본 폰트를 변경해보겠습니다.

/wp-includes/js/tinymce/skins/wordpress/wp-content.css

위 경로에 있는 ‘wp-contents.css‘를 수정해주면 됩니다. TinyMCE이 아니라 다른 플러그인을 사용하시더라도 비슷한 경로에 css 파일을 수정하면 됩니다.

 

wp-contents.css 파일의 12번 째 줄, 위와 같이 font-family가 Georgia로 되어 있는 것이 보입니다.

 

저는 발행된 화면에서 적용되는 ‘Open Sans’ 폰트로 수정했습니다.

font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

나눔고딕 등의 한글 폰트를 사용하시는 분은 아래와 같이 입력하시면 됩니다.

font-family: "Nanumgothic", "Nanum gothic" sans-serif;

 

실제 발행된 화면과 동일한 폰트로 적용된 것을 확인할 수 있습니다. 이제 좀 더 편안한 마음으로 포스팅 할 수 있게 되었습니다.

닷홈에 워드프레스 설치하기 – 2. 워드프레스 설치

작성일자 글쓴이
응답

닷홈에 워드프레스 설치하기의 두 번째 순서입니다. 이전 포스팅 ‘1. 닷홈 무료 호스팅 신청‘에서 호스팅을 세팅이 완료되었으니, 바로 워드프레스를 설치해보겠습니다. 기존에 네이버 블로그나 티스토리를 하시는 분 중에 워드프레스를 어려워하시는 분들이 많으신데요. 아마도 이렇게 따로 호스팅을 받고, 설치도 해줘야 해서 말만 들어도 머리가 아파서 그런 것 같습니다. 어렵게 생각할 것 없이 그대로 따라 하시면 됩니다. 실제로 한번 해보시면 다음부터는 쉽게 설치할 수 있을 거라 생각합니다.

워드프레스 다운로드

우선 워드프레스를 다운받아야 합니다. 워드프레스 한국어 공식 홈페이지로 가서 다운받으시면 됩니다.

워드프레스 한국어 공식 홈페이지로 접속하면 위와 같은 화면을 볼 수 있습니다. [워드프레스 5.2.4 다운로드]를 클릭하여 워드프레스 파일을 다운로드받습니다. 뒤에 숫자의 경우 버전이 바뀔 경우 다르게 나올 수 있습니다. 압축 파일로 다운로드됩니다. 압축을 해제하시면 됩니다.

 

파일질라(FileZilla)다운로드

워드프레스 파일을 호스팅 공간에 업로드하기 위해서는 FTP 전송 프로그램이 필요합니다. 많은 사람이 사용하는 파일질라를 다운로드받도록 하겠습니다. 파일질라 홈페이지로 들어가면 위와 같은 화면이 보이는데요. 왼쪽에 보이는 [Download FileZilla Client]를 클릭하여 다운로드받습니다.

다운로드 받은 파일질라 설치 파일을 실행하여 PC에 설치해주세요. 설치과정은 간단하니 생략하겠습니다.

 

닷홈 호스팅에 워드프레스 파일 업로드

PC에 설치된 파일질라를 실행합니다. 실행된 파일질라의 상단에 보면 위 사진과 같은 영역이 보입니다. 여기에 닷홈 호스팅 세팅 시 입력했던 FTP 정보를 입력합니다.

  • 호스트(H): 닷홈의 주소를 입력합니다. ‘닷홈FTP 아이디.dothome.co.kr‘를 입력합니다.
  • 사용자명(U): ‘닷홈 FTP 아이디‘를 입력합니다.
  • 비밀번호: ‘닷홈 FTP 접속 비밀번호‘를 입력합니다.
  • 포트(P): 21번을 사용하지만 비워 놓으셔도 됩니다.

모두 입력이 되었다면 [빠른 연결(Q)] 버튼을 클릭하세요.

 

처음 접속 시 나타나는 메시지 알림창입니다. [확인]을 눌러주시면 됩니다.

 

접속이 완료되면 리모트 사이트 영역에 위와 같은 구조가 보입니다. 여기서 html  폴더를 더블 클릭해서 들어갑니다.

 

html 폴더입니다. 위 사진에서처럼 3개의 파일이 보입니다. 다 필요 없으니 삭제합시다.

 

비워진 html  폴더로 위에서 다운로드 받은 워드프레스 파일을 모두 선택 후 드래그해 줍니다.

 

워드프레스 파일이 모두 html 폴더로 업로드되었습니다. 이제 워드프레스 설치를 위한 모든 준비가 끝났습니다.

 

워드프레스 설치

내 닷홈 주소로 접속합니다. ‘FTP 아이디.dothome.co.kr‘로 접속하면, 위와 같은 화면을 볼 수 있습니다. Let’s go! 버튼을 클릭합니다.

 

여기가 다들 어려워하는 화면입니다. 하지만 어려울 게 하나도 없습니다. 닷홈에서 호스팅 세팅할 때, DB 명, DB 아이디는 모두 FTP 아이디와 같았습니다. 내가 설정했던 FTP 아이디를 입력해 줍니다.

  • 데이터베이스 이름: ‘닷홈의 DB 명‘을 입력합니다.
  • 사용자명: ‘닷홈의 DB 아이디‘를 입력합니다.
  • 암호: ‘닷홈의 DB 비밀번호‘를 입력합니다.

잘 입력되었다면 [전송]을 클릭해 주세요. 만약 잘못된 정보가 입력되었다면 잘못되었다는 안내가 나옵니다. 다시 잘 입력하면 되니, 너무 두려워 마시고 자신 있게 입력하세요.

※ 닷홈이 아니라 다른 호스팅의 경우에는 DB를 생성해야 하는 경우도 있습니다. 

 

정보가 잘 입력되었다면 위와 같은 화면을 만날 수 있습니다. [설치 실행하기]를 클릭합니다.

 

자, 이제 마지막 단계입니다. 앞으로 사용할 워드프레스에서 사용할 정보를 입력받는 페이지입니다.

  • 사이트 제목: 워드프레스 사이트 제목을 입력하세요. 나중에 변경 가능합니다.
  • 사용자명: 워드프레스 로그인 ID를 입력하세요.
  • 암호: 워드프레스 로그인 비밀번호를 입력하세요.
  • 이메일 주소: 본인의 이메일 주소를 입력하세요.
  • 검색 엔진 접근 여부: 체크 시 검색 엔진 봇이 접근을 하지 못합니다. 체크하지 마세요. 나중에 변경 가능합니다.

모두 입력되었으면 [워드프레스 설치하기] 버튼을 클릭합니다.

 

축하합니다. 워드프레스 설치에 성공하셨습니다. 간단하죠? 아래 [로그인]을 누르시면 로그인 화면으로 바로 이동됩니다.

 

워드프레스 로그인 화면입니다. 바로 위에서 입력했던 아이디와 비밀번호를 입력하시면 로그인이 되는 것을 볼 수 있습니다.

 

워드프레스에 오신 것을 환영합니다!

닷홈에 워드프레스 설치하기 – 1. 닷홈 무료 호스팅 신청

작성일자 글쓴이
응답

닷홈에 워드프레스 설치하기를 통해서 일반 호스팅 사용 시 워드프레스를 설치하는 방법을 작성할 계획입니다. 나스를 사용하시는 분들은 ‘시놀로지 나스(NAS)에서 워드프레스 수동으로 설치: 완결판’을 보시면 됩니다.

여기서는 닷홈에서 제공하는 무료 호스팅을 기준으로 워드프레스 설치를 설명합니다. 우선 닷홈에 회원가입이 되어 있어야겠죠?

 

닷홈(dothome)에서 무료 호스팅 신청하기

닷홈 홈페이지에서 회원가입 후 로그인까지 하신 뒤에 GNB에 있는 ‘웹호스팅‘으로 마우스 커서를 올리면 아래에 ‘무료 호스팅‘을 클릭해서 들어갑니다.

 

위와 같은 화면을 볼 수 있는데요. 오른쪽에 보이는 [무제한 웹호스팅 FREE 신청하기] 버튼은 클릭하지 마세요. 닷홈에서 구매한 도메인이 있는 분들만 신청할 수 있는 메뉴입니다. 아래로 스크롤을 내리세요.

 

스크롤을 좀 내리시면, 무료 호스팅 신청이라는 제목과 함께 위와 같은 부분이 보입니다. 기존에 제공하던 무료 호스팅에서 무료 호스팅 Like+라는 서비스가 생겼네요.

 

무료 호스팅 Like+ 는 닷홈 페이스북 페이지를 좋아요 하신 분들에게 기존에 제공하던 디스크 용량과 일 트래픽을 3배 더 주는 서비스네요. 아주 좋습니다.

 

무료 호스팅 Like+ 에서 ‘공간만 설치‘ 옵션(기본으로 선택되어 있습니다)을 선택하고, [Like+ 신청하기] 버튼을 클릭합니다.

 

다음 단계로 전환된 페이지에서 스크롤을 조금만 내리면 위와 같은 화면이 보입니다. ‘위의 사항을 숙지했습니다.’ 체크하시고, 아래의 [무료 호스팅 신청하기] 버튼을 클릭합니다. 오른쪽에 보이는 좋아요는 따로 안 누르셔도 됩니다. 좋아요 클릭을 안 했다면 아래와 같이 따로 좋아요를 유도하는 팝업 창이 호출됩니다.

 

닷홈 페이스북 페이지에 좋아요를 하지 않은 분들은 이런 창이 나오면 당황하지 않고, [좋아요]를 클릭해 줍니다.

 

무료 호스팅 Like+ 신청 페이지입니다. 담당자 정보와 계약자 정보가 보입니다. 적당히 기입해 주시면 됩니다. 아래에는 신청 서비스 내역이 보입니다. HDD 공간은 300M, 일 트래픽 300M, DB 1개, 도메인 1개, E메일은 0개입니다. 내용 확인하셨으면 스크롤을 내립니다.

 

웹호스팅 설정을 할 차례입니다. FTP 아이디에 원하는 아이디를 입력하신 후, [중복확인] 버튼을 클릭하세요. 사용 가능한 아이디일 경우, DB 명과 DB 아이디가 모두 동일한 아이디로 자동 설정됩니다. FTP 비밀번호와 DB 비밀번호를 입력해주세요.

 

웹호스팅 설정 바로 아랫부분입니다. ‘무료계정 사용정책에 동의합니다.‘ 체크해 주시고, 확인 단어를 왼쪽에 보이는 단어를 입력해줍니다. 이메일 인증이 필요한데요. [인증 코드 발송]을 클릭 후, 메일로 받은 인증 코드를 아래에 입력하세요. 모든 항목이 입력되었으면 아래에 있는 [신청하기] 버튼을 클릭합니다.

 

무료 호스팅 설치가 진행 중입니다. 잠시 기다려주세요. 라는 문구가 나오게 됩니다. 그리 긴 시간이 걸리지 않습니다.

 

잠시만 기다리시면, 위와 같은 화면을 볼 수 있습니다. 무료 호스팅 신청이 완료되었습니다.

 

내가 신청한 무료 호스팅은 마이닷홈에서 확인 가능합니다. 접속 주소는 웹호스팅 설정에서 입력했던 FTP아이디.dothhome.co.kr입니다. 

 

저는 rapsso로 설정했기 때문에 rapsso.dothome.co.kr로 설정이 되었습니다. 해당 주소로 접속해 보면 위와 같은 화면을 볼 수 있습니다. 무료 호스팅을 받았으니, 이제 워드프레스 설치를 시작할 수 있게 되었습니다.

다음 단계인 ‘2. 워드프레스 설치‘로 넘어가세요!