반응형

 

우커머스에 대해 템플릿을 불러오는 방법은 아래 참고

https://ansan-survivor.tistory.com/982

 

[Wordpress] 워드프레스 웹쇼핑몰(E-commerce) 우커머스(Woocommerse)로 무료 템플릿 불러오기

1. 우커머스 플러그인 설치하기 및 활성화 2. 테마 설치하기 3. 엘리멘토 플러그인 설치 (Elementor에 대해서 및 사용방법은 아래 참고) https://ansan-survivor.tistory.com/652 [Wordpress] 워드프레스 Eleme..

ansan-survivor.tistory.com

 

우커머스의 

1.

 

2.

원화 설정
원화는 소수자릿수가 없으므로 0으로 제거

 

 

 

 

 

 

 

반응형
반응형

 

 

1. 우커머스 플러그인 설치하기 및 활성화

설치완료 후 "활성화" 클릭
상세설정은 우선 건너 뛰기
좌측에 우커머스 플러그인 확인

 

2. 테마 설치하기

커스텀에 제일 많이 쓰이는 "아스트라" 테마 설치

 

3. 엘리멘토 플러그인 설치

Elementor는 페이지 편집을 좀 더 편하고 깔끔하게 도와주는 플러그인

(Elementor에 대해서 및 사용방법은 아래 참고)

https://ansan-survivor.tistory.com/652

 

[Wordpress] 워드프레스 Elementor Page Builder(엘리멘터 페이지 빌더) 사용하기

아래 두 포스팅을 따라 세팅하면, 이제 페이지를 엘리멘터 페이지 빌더를 이용해 만들 수 있는 환경이 된다. 워드프레스 초기설정 ansan-survivor.tistory.com/615 [Wordpress] 워드프레스 홈페이지 관리자

ansan-survivor.tistory.com

 

 

4. 스타터 템플릿 (Starter Templates) 설치 및 활성화

    ( 초기 시작할 데모 템플릿을 제공해주는 플러그인)

    Theme (테마)에 "Starter Templates"가 있는지 확인  (활성화 하면 생긴다)

 

5. Starter Template에서 E-commerce 템플릿을 다운로드

eCommerce 템플릿과 무료

    (Preview로 사이트에 대한 뷰를 미리 볼 수 있다)

 

6. 선택이 완료되면, 해당 테마의 아랫부분의 Import Complete Site 클릭

정보 입력 후 Next
Skip
import 완료

(결과) 

내 홈페이지가 불러온 E-commerce 홈페이지로 변경됨을 알 수 있다.

장바구니도 잘 동작한다.

 

관리자 페이지를 보면 현재 템플릿의 모든 페이지들이 생성됨을 알 수 있다.

 

(사용할 통화 변경은 아래 참고)

https://ansan-survivor.tistory.com/983

 

[Wordpress] 워드프레스 웹쇼핑몰(E-commerce) 우커머스(Woocommerse) 통화 수정하기 (달러, 원화, 위안화,

우커머스에 대해 템플릿을 불러오는 방법은 아래 참고 https://ansan-survivor.tistory.com/982 [Wordpress] 워드프레스 웹쇼핑몰(E-commerce) 우커머스(Woocommerse)로 무료 템플릿 불러오기 1. 우커머스 플러그..

ansan-survivor.tistory.com

 

** 새로 추가된 플러그인 살펴보기 **

CartFlows : 결재 관련 플러그인

Elementor, Elementor - Header, Footer & Block : 엘리멘토로 해더와 푸터 및 블록 등을 만들어주는 플러그인

Starter Templates (템플릿 불러온 플러그인)

WooCommerse (우커머스 플러그인)

WooCommerse Cart Abandonment Recovery : 장바구니에 담고 결재하지 않은 고객들 정보를 관리

WPForms Lite : Contact US에서 고객이 문의를 보내면 관리자에게 이메일로 전달되는 플러그인

 

 

 

 

아래 영상 참고

https://www.youtube.com/watch?v=yKQ8ZdUXCAg 

 

 

반응형
반응형

워드프레스를 통해 무료로 웹페이지를 제작하면 좋지만, 손이 많이 들어가고 알아야 할 지식들도 많다.

시간은 금이 아니겠는가, 만약 충분한 시간을 투자하지 못한다면, 빠르게 비즈니스를 운영할 웹을 만들고 싶다면 전문가의 힘을 빌리는것이 최선이다.

 

바른web은 여러 웹페이지를 무료로 제작해주고 있는 사이트이다. 월 3만원의 관리비로 전문가들이 만든 홈페이지를 소유할 수 있다.

장점 및 혜택으로는 아래와 같다.

 

웹페이지 방문 및 신청은 아래 링크에서 가능하다.

https://www.leaderscpa.com/merchant/barunhome2/log.asp?npid=37405 

 

https://www.leaderscpa.com/merchant/barunhome2/log.asp?npid=37405

 

www.leaderscpa.com

 

 

 

반응형
반응형

 

 

1. 아래 링크에서 사용하기 원하는 테마 확인하기

https://highlightjs.org/static/demo/

 

highlight.js demo

 

highlightjs.org

테마들을 하나씩 눌러보면서 확인하고 맘에 드는것을 고른다.

2. 티스토리 html편집기 들어간다.

 

3. <head>와 </head> 사이 아무대나 아래 줄을 추가한다.

    그리고 아래 "테마이름" 에다가 위에서 고른 테마 이름을 넣는다.

    단, 모든 문자는 소문자로 한다. 띄어쓰기는 "-"로 대체한다.

<!-- 코드블럭 라이브러리 추가 -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/테마이름.min.css"> 
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> 
<!-- 코드 블럭 라인 넘버 표시 --> 
<script src="./images/highlightjs-line-numbers.js"></script> 
<script> hljs.initLineNumbersOnLoad(); $(document).ready(function() { $('code.hljs').each(function(i, block) { hljs.lineNumbersBlock(block); }); }); </script> 
<!-- 코드블럭 글씨 크기 --> 
<style> pre > code {font-size: 13.5px;} </style>

필자는 atom-one-dark 를 선택

 

그러면 코드블럭 테마가 변경됨.

반응형

참고링크

https://july7k.tistory.com/161

 

[티스토리 꾸미기] 코드 블럭 변경(테마 적용, 글씨체, 글씨 크기)

티스토리에 '코드 블럭' 이라는 기능이 참 좋다고 생각하는데, 기본 테마는 가독성이 떨어진다는 단점이 있다. 그래서 찾아본 방법!  1. 간단하게 바꾸고 싶다 - 플러그인 적용  티스토리 관리자

july7k.tistory.com

 

반응형
반응형

웹브라우저에 네임을 입력하면, URL의 IP주소를 PC가 불러오는 과정이 있다. (자세히는 아래 참고)

https://ansan-survivor.tistory.com/435

 

[CentOS 7] 리눅스 CentOS 7 도메인 주소의 ip주소 찾아오기, 국내 DNS서버 정보, DNS 서버 바꾸기

DNS서버란? (1번)아래 그림처럼, 유저가 www.naver.com을 을 입력했을 때, ip주소를 모름으로 근처의 DNS 서버로 가서 물어본다. (2번) 그러면 DNS서버가 내 컴퓨터에게 ip주소를 알려준다. 223.130.195.200 를

ansan-survivor.tistory.com

 

 

우리가 흔히 보는 웹 URL은 아래와 같은 구조로 이루어져 있다.

이 이름구조가 어떻게 되어있는지 살펴본다.

https://www.google.com/

https://www.mobis.co.kr/

https://www.yahoo.co.jp/

 

위 부분을 잘라보면 https:// 으로 시작하고, www 가 있으며 각 회사별 도메인 이름, com 또는 co.kr 또는 co.jp 등등

이 구조에 대해 파해쳐 본다.

 

도메인의 이름 체계는 아래와 같은 그림으로 이루어져 있다. 

위 그림을 해석해보면, 최 상위 트리에 root가 있고, 그 아래 흔히 많이 보는 .com , .net , .org 등의 네임서버가 있다.

각기 다른 네임서버 별로 하위 목록을 별도로 다룬다.

예를 들면  .com 으로 등록하면, 해당 .com은 수 많은 회사들의 정보를 모두 다루는 것이 아니라 .com 으로 등록한 회사의 네임서버들의 정보만 다루게 된다.

또 위 그림처럼 google이라는 네임서버로 들어오게 되면, 구글에 있는 서버pc의 www, support 등으로 분기하여 해당 디렉터리로 이동하여 서비스를 요청 한다.

 

예를 들면 아래 구글의 경우 support 디렉터리와, www 디렉터리를 운용해서 웹서비스를 제공하고 있다.

https://support.google.com/

https://www.google.com/

 

만약 위 페이지를 요청한다면 아래와 같은 순으로 요청할 것이다.

1. http:// 프로토콜 확인 (인터넷 프로토콜)

2. .com 네임서버 확인

3. google 네임서버 확인

4. www의 경로로 접근하여 웹서비스 받음.

 

실제 순서는 아래와 같다.

Local Name Server는 /etc/resolv.conf 에 ip주소가 들어가 있다.

1. 내 PC브라우저에서 www.google.com.  의 URL요청 (실제로는 맨 뒤  Root를 의미하는 . 이 있다)

2~3. Local Name Server에서 Cache DB가 있나 확인, 있으면 바로 뿌리고 없으면 인터넷으로 나가서 찾음

4. Cache DB에 없으므로 인터넷 상의 ROOT 네임서버로 이동 [ . ]

5.  ROOT에서 .COM 네임서버를 알려줌 이동 후 해당 IP값 리턴. [ .com. ]

6.  .COM 네임서버에서 google의 IP를 알려줌 IP값 리턴. [ google.com. ]

7.  google.com을 IP를 찾아, 해당 서비스의의 디렉터리를 찾아 이동하여 IP리턴 [ www.google.com. ]

    (예, www : 123.123.123.111 /   ftp : 123.123.123.222  /  support : 123.123.123.333 등등)

8.  찾은 IP주소를 Local Name Server에 리턴

9. Local Name Server에서 해당 IP주소를 유저에게 서비스 제공

10. www.google.com.  의 웹브라우저 서비스에 접근 가능

 

 

 

 

 

 

 

 

 

 

반응형
반응형

티스토리의 square 테마를 사용할 경우 아래와 같이 메인페이지를 조절할 수 있다.

 

먼저 html 편집기에 들어간다.

 

1. 관리페이지 하단 - 스킨 편집

2. html 편집

3. 편집기에서 Ctrl + F 를 누르고, "content-inner" 검색 후 아래와 같이 /* content */ 주석 있는 부분으로 간다.


4. max-width 값을 바꿔가며 메인페이지의 변화를 본다.

 

 

반응형
반응형

티스토리의 사이드바의 타이틀과 하위목록이 헷갈릴 경우가 있다.

이를 표제를 두껍게 해서 보기 편하도록 만들 수 있다.

 

먼저 html 편집기에 들어간다.

1. 관리페이지 하단 - 스킨 편집

2. html 편집

3. CSS의 약 64페이지 근처 아래와 같이 하나 추가한다.

#sidebar .category > ul > li > ul > li > a { font-weight: bold; }

(결과) 타이틀이 두껍게 변한다.

 

 

 

 

 

반응형
반응형

HTML코드를 모른다면 자동으로 변환 시켜주는 웹사이트가 있으면 편리하다.

아래 그러한 기능을 지원한다.

https://html-online.com/editor/

 

Online HTML Editor

The best real-time online HTML editor software kit with dynamic instant live visual preview and inline WYSIWYG editor and markup clean-up feature

html-online.com

반응형

사용방법은 왼쪽에 원하는 텍스트를 입력하면 오른쪽에 코드가 자동 생성된다.

 

 

 

반응형
123456789

+ Recent posts