$list_IP_entry
array(252) {
  [0]=>
  string(28) "185.191.171.13, 172.70.34.40"
  [1]=>
  string(30) "23.100.232.233, 172.70.126.178"
  [2]=>
  string(28) "185.191.171.23, 172.69.62.67"
  [3]=>
  string(27) "66.249.64.148, 172.70.35.65"
  [4]=>
  string(29) "114.119.129.71, 172.70.147.94"
  [5]=>
  string(29) "66.249.64.142, 172.70.134.130"
  [6]=>
  string(28) "66.249.64.148, 172.69.62.214"
  [7]=>
  string(29) "157.55.39.10, 108.162.246.103"
  [8]=>
  string(30) "114.119.129.71, 162.158.167.18"
  [9]=>
  string(27) "66.249.64.80, 172.70.42.116"
  [10]=>
  string(29) "114.119.129.4, 172.70.142.204"
  [11]=>
  string(30) "157.55.39.135, 162.158.146.226"
  [12]=>
  string(30) "114.119.129.9, 162.158.167.154"
  [13]=>
  string(27) "40.77.167.45, 172.69.62.214"
  [14]=>
  string(28) "88.198.25.244, 162.158.89.77"
  [15]=>
  string(27) "5.255.253.173, 172.68.10.76"
  [16]=>
  string(26) "27.3.0.13, 162.158.165.226"
  [17]=>
  string(29) "23.100.232.233, 172.70.178.20"
  [18]=>
  string(30) "123.24.205.116, 162.158.165.32"
  [19]=>
  string(27) "162.55.86.61, 162.158.90.20"
  [20]=>
  string(30) "207.46.13.146, 108.162.246.103"
  [21]=>
  string(27) "185.191.171.7, 172.69.63.25"
  [22]=>
  string(29) "114.119.129.22, 172.70.143.89"
  [23]=>
  string(31) "103.131.71.159, 162.158.165.240"
  [24]=>
  string(27) "40.77.167.65, 172.69.62.214"
  [25]=>
  string(27) "66.249.73.24, 172.69.69.220"
  [26]=>
  string(30) "114.119.130.29, 172.70.188.250"
  [27]=>
  string(28) "42.118.166.35, 172.68.144.67"
  [28]=>
  string(26) "66.249.73.9, 172.69.69.220"
  [29]=>
  string(29) "185.191.171.23, 172.70.34.134"
  [30]=>
  string(28) "88.198.25.244, 162.158.91.14"
  [31]=>
  string(29) "103.131.71.97, 172.70.147.133"
  [32]=>
  string(28) "162.55.86.61, 162.158.89.212"
  [33]=>
  string(26) "40.77.167.72, 172.70.35.66"
  [34]=>
  string(29) "207.46.13.65, 108.162.246.104"
  [35]=>
  string(29) "207.46.13.65, 162.158.146.227"
  [36]=>
  string(31) "168.119.140.252, 162.158.94.213"
  [37]=>
  string(31) "114.119.129.218, 162.158.167.91"
  [38]=>
  string(27) "185.191.171.6, 172.70.42.69"
  [39]=>
  string(29) "82.80.230.228, 162.158.94.239"
  [40]=>
  string(27) "185.191.171.6, 172.69.63.36"
  [41]=>
  string(30) "157.55.39.156, 162.158.146.227"
  [42]=>
  string(30) "114.119.129.225, 172.70.147.97"
  [43]=>
  string(27) "66.249.64.154, 172.70.35.66"
  [44]=>
  string(27) "66.249.64.129, 172.70.35.66"
  [45]=>
  string(29) "207.46.13.91, 108.162.246.104"
  [46]=>
  string(29) "88.198.25.244, 162.158.89.220"
  [47]=>
  string(27) "207.46.13.91, 172.68.132.20"
  [48]=>
  string(31) "114.119.129.208, 172.70.142.205"
  [49]=>
  string(27) "207.46.13.91, 172.70.178.49"
  [50]=>
  string(27) "207.46.13.80, 172.68.132.20"
  [51]=>
  string(28) "123.16.213.57, 172.70.142.55"
  [52]=>
  string(28) "87.250.224.147, 172.68.10.77"
  [53]=>
  string(30) "114.119.129.218, 172.70.143.90"
  [54]=>
  string(29) "168.119.3.58, 141.101.104.174"
  [55]=>
  string(28) "162.55.86.61, 162.158.94.155"
  [56]=>
  string(29) "104.222.149.62, 172.70.135.82"
  [57]=>
  string(28) "185.191.171.6, 172.70.134.93"
  [58]=>
  string(30) "114.119.129.22, 162.158.166.46"
  [59]=>
  string(27) "1.53.196.206, 172.70.142.55"
  [60]=>
  string(27) "87.250.224.97, 172.68.10.77"
  [61]=>
  string(31) "114.119.129.218, 172.70.188.151"
  [62]=>
  string(29) "207.46.13.198, 162.158.146.61"
  [63]=>
  string(29) "88.198.25.244, 162.158.90.215"
  [64]=>
  string(29) "207.46.13.108, 162.158.146.61"
  [65]=>
  string(32) "114.119.129.225, 162.158.165.105"
  [66]=>
  string(31) "103.131.71.160, 162.158.165.241"
  [67]=>
  string(27) "40.77.167.80, 172.70.174.97"
  [68]=>
  string(28) "66.249.66.74, 172.70.134.223"
  [69]=>
  string(28) "162.55.86.61, 162.158.88.223"
  [70]=>
  string(30) "118.70.67.229, 162.158.165.187"
  [71]=>
  string(28) "40.77.167.80, 172.70.134.223"
  [72]=>
  string(30) "114.119.129.208, 172.70.189.90"
  [73]=>
  string(31) "103.131.71.102, 162.158.165.241"
  [74]=>
  string(28) "88.99.150.47, 162.158.94.111"
  [75]=>
  string(30) "114.119.129.233, 172.70.142.55"
  [76]=>
  string(29) "185.191.171.21, 172.70.134.37"
  [77]=>
  string(27) "66.249.66.91, 172.69.62.215"
  [78]=>
  string(29) "66.249.66.210, 172.70.134.223"
  [79]=>
  string(29) "113.22.171.251, 172.70.189.90"
  [80]=>
  string(27) "93.158.161.62, 172.68.10.77"
  [81]=>
  string(31) "103.131.71.235, 162.158.165.241"
  [82]=>
  string(30) "114.119.130.29, 172.69.135.191"
  [83]=>
  string(28) "162.55.86.61, 162.158.92.167"
  [84]=>
  string(26) "40.77.167.80, 172.70.35.66"
  [85]=>
  string(28) "40.77.167.80, 162.158.78.157"
  [86]=>
  string(30) "114.119.129.235, 172.70.147.53"
  [87]=>
  string(30) "103.131.71.104, 172.70.147.133"
  [88]=>
  string(30) "103.131.71.138, 172.70.147.133"
  [89]=>
  string(29) "88.198.25.244, 162.158.90.119"
  [90]=>
  string(28) "162.55.86.61, 198.41.242.155"
  [91]=>
  string(30) "157.55.39.192, 108.162.246.104"
  [92]=>
  string(29) "103.131.71.96, 172.70.142.193"
  [93]=>
  string(28) "66.249.69.192, 172.70.178.49"
  [94]=>
  string(29) "114.119.130.29, 172.70.143.76"
  [95]=>
  string(28) "207.46.13.91, 162.158.146.61"
  [96]=>
  string(28) "162.55.86.61, 162.158.90.131"
  [97]=>
  string(29) "103.131.71.91, 172.70.147.133"
  [98]=>
  string(29) "66.249.64.142, 172.70.134.223"
  [99]=>
  string(28) "66.249.64.148, 172.70.174.97"
  [100]=>
  string(28) "157.55.39.25, 162.158.146.61"
  [101]=>
  string(29) "114.119.129.235, 172.70.93.29"
  [102]=>
  string(29) "157.55.39.25, 108.162.246.104"
  [103]=>
  string(30) "103.131.71.224, 172.70.188.157"
  [104]=>
  string(29) "185.191.171.12, 172.70.175.28"
  [105]=>
  string(29) "66.249.69.212, 172.70.126.177"
  [106]=>
  string(30) "66.249.69.220, 108.162.216.245"
  [107]=>
  string(31) "114.119.129.225, 162.158.163.62"
  [108]=>
  string(29) "113.161.35.236, 172.70.188.37"
  [109]=>
  string(29) "139.99.122.1, 162.158.162.215"
  [110]=>
  string(28) "115.74.118.39, 172.70.143.76"
  [111]=>
  string(54) "2402:800:637c:2cf4:24e5:ff4b:1389:f46c, 162.158.162.89"
  [112]=>
  string(27) "40.77.167.74, 172.70.174.97"
  [113]=>
  string(29) "103.131.71.55, 172.70.188.157"
  [114]=>
  string(30) "114.119.150.226, 172.70.189.94"
  [115]=>
  string(29) "103.131.71.71, 172.70.142.193"
  [116]=>
  string(30) "114.119.150.209, 172.70.142.55"
  [117]=>
  string(28) "162.55.86.61, 172.70.242.165"
  [118]=>
  string(28) "40.77.167.74, 172.70.134.223"
  [119]=>
  string(29) "103.131.71.81, 172.70.188.157"
  [120]=>
  string(29) "213.180.203.174, 172.68.10.77"
  [121]=>
  string(29) "114.119.144.36, 172.70.189.38"
  [122]=>
  string(29) "103.131.71.72, 162.158.178.27"
  [123]=>
  string(54) "2402:800:63a8:b2e0:95ea:72a3:54f9:4a93, 172.70.189.134"
  [124]=>
  string(27) "162.55.86.61, 172.70.251.86"
  [125]=>
  string(30) "14.243.138.102, 162.158.178.43"
  [126]=>
  string(55) "2402:800:61fb:4388:49d4:ddc0:fea5:fd95, 162.158.178.142"
  [127]=>
  string(28) "207.46.13.75, 162.158.146.61"
  [128]=>
  string(30) "103.131.71.151, 162.158.178.27"
  [129]=>
  string(29) "114.119.150.22, 172.70.189.98"
  [130]=>
  string(28) "162.55.86.61, 172.70.246.131"
  [131]=>
  string(29) "185.191.171.5, 172.70.135.202"
  [132]=>
  string(29) "185.191.171.43, 172.70.34.135"
  [133]=>
  string(29) "207.46.13.16, 108.162.246.104"
  [134]=>
  string(30) "103.131.71.233, 162.158.178.27"
  [135]=>
  string(29) "66.249.68.52, 108.162.246.104"
  [136]=>
  string(28) "207.46.13.16, 162.158.146.61"
  [137]=>
  string(30) "5.255.253.184, 141.101.105.237"
  [138]=>
  string(27) "162.55.86.61, 172.70.250.77"
  [139]=>
  string(30) "103.131.71.231, 162.158.178.27"
  [140]=>
  string(29) "114.119.144.36, 172.70.189.98"
  [141]=>
  string(31) "110.249.202.27, 162.158.106.185"
  [142]=>
  string(30) "114.119.150.209, 172.70.142.81"
  [143]=>
  string(30) "103.131.71.222, 162.158.178.27"
  [144]=>
  string(28) "88.198.25.244, 172.70.246.21"
  [145]=>
  string(29) "103.131.71.97, 162.158.178.27"
  [146]=>
  string(28) "66.249.79.22, 162.158.166.65"
  [147]=>
  string(31) "114.119.150.226, 172.70.188.247"
  [148]=>
  string(30) "103.131.71.126, 162.158.178.27"
  [149]=>
  string(28) "162.55.86.61, 172.70.242.151"
  [150]=>
  string(30) "185.191.171.19, 172.70.174.175"
  [151]=>
  string(28) "161.0.2.166, 108.162.219.165"
  [152]=>
  string(26) "161.0.2.166, 172.70.230.81"
  [153]=>
  string(27) "161.0.2.166, 172.70.114.215"
  [154]=>
  string(27) "161.0.2.166, 172.70.230.125"
  [155]=>
  string(26) "161.0.2.166, 162.158.63.21"
  [156]=>
  string(26) "161.0.2.166, 172.70.115.32"
  [157]=>
  string(30) "185.191.171.26, 172.70.174.175"
  [158]=>
  string(29) "103.131.71.58, 162.158.178.27"
  [159]=>
  string(29) "157.55.39.75, 108.162.246.104"
  [160]=>
  string(27) "185.191.171.7, 172.70.135.6"
  [161]=>
  string(30) "114.119.150.208, 172.70.147.77"
  [162]=>
  string(30) "103.131.71.237, 162.158.178.27"
  [163]=>
  string(29) "66.249.66.206, 172.70.134.223"
  [164]=>
  string(27) "66.249.66.192, 172.70.38.79"
  [165]=>
  string(29) "114.119.150.215, 172.70.93.17"
  [166]=>
  string(29) "66.249.66.204, 172.70.134.223"
  [167]=>
  string(30) "181.177.122.232, 172.70.230.19"
  [168]=>
  string(31) "181.177.122.232, 172.70.114.235"
  [169]=>
  string(29) "181.177.122.232, 162.158.63.8"
  [170]=>
  string(31) "181.177.122.232, 172.70.114.249"
  [171]=>
  string(31) "181.177.122.232, 172.70.230.125"
  [172]=>
  string(27) "87.250.224.84, 172.68.10.77"
  [173]=>
  string(32) "114.119.150.208, 162.158.163.156"
  [174]=>
  string(30) "103.131.71.194, 162.158.178.27"
  [175]=>
  string(30) "114.119.150.209, 172.70.188.97"
  [176]=>
  string(31) "193.235.141.23, 162.158.222.131"
  [177]=>
  string(27) "88.99.150.47, 172.70.242.37"
  [178]=>
  string(27) "194.35.14.154, 172.69.33.69"
  [179]=>
  string(29) "114.119.144.36, 172.70.143.46"
  [180]=>
  string(29) "185.191.171.2, 172.70.174.147"
  [181]=>
  string(30) "185.191.171.45, 172.70.174.231"
  [182]=>
  string(32) "114.119.150.208, 162.158.162.215"
  [183]=>
  string(27) "162.55.86.61, 172.70.251.88"
  [184]=>
  string(29) "3.238.180.255, 172.70.175.168"
  [185]=>
  string(30) "185.191.171.14, 172.70.134.251"
  [186]=>
  string(29) "103.131.71.152, 172.68.253.93"
  [187]=>
  string(27) "27.68.68.164, 172.70.143.72"
  [188]=>
  string(30) "195.201.12.243, 172.70.250.243"
  [189]=>
  string(29) "207.46.13.134, 162.158.146.61"
  [190]=>
  string(30) "5.255.253.134, 141.101.105.237"
  [191]=>
  string(32) "114.119.150.215, 162.158.170.241"
  [192]=>
  string(29) "209.127.115.38, 172.70.110.67"
  [193]=>
  string(29) "103.131.71.134, 172.68.253.93"
  [194]=>
  string(30) "114.119.150.209, 172.70.143.96"
  [195]=>
  string(28) "66.249.66.20, 172.70.134.223"
  [196]=>
  string(29) "103.131.71.232, 172.68.253.93"
  [197]=>
  string(30) "114.119.159.135, 172.70.142.81"
  [198]=>
  string(28) "162.55.86.61, 162.158.89.134"
  [199]=>
  string(28) "46.161.11.4, 162.158.222.151"
  [200]=>
  string(29) "157.55.39.161, 162.158.146.61"
  [201]=>
  string(30) "185.191.171.15, 162.158.78.161"
  [202]=>
  string(31) "114.119.150.215, 172.70.147.200"
  [203]=>
  string(28) "45.145.131.56, 172.71.98.185"
  [204]=>
  string(30) "185.191.171.39, 172.70.174.231"
  [205]=>
  string(26) "66.249.66.18, 172.70.35.66"
  [206]=>
  string(29) "103.131.71.196, 172.68.253.93"
  [207]=>
  string(29) "5.255.253.101, 172.71.102.105"
  [208]=>
  string(30) "114.119.159.135, 172.70.143.72"
  [209]=>
  string(31) "114.119.159.135, 172.70.189.120"
  [210]=>
  string(30) "114.119.150.208, 172.70.147.15"
  [211]=>
  string(29) "103.131.71.138, 172.68.253.93"
  [212]=>
  string(29) "114.119.144.36, 172.70.142.81"
  [213]=>
  string(30) "114.119.150.215, 172.70.92.219"
  [214]=>
  string(31) "114.119.150.209, 172.70.188.253"
  [215]=>
  string(29) "103.131.71.228, 172.68.253.93"
  [216]=>
  string(29) "185.191.171.44, 172.70.174.21"
  [217]=>
  string(29) "5.255.253.130, 172.71.102.105"
  [218]=>
  string(29) "185.191.171.9, 172.70.135.208"
  [219]=>
  string(29) "114.119.150.209, 172.70.93.39"
  [220]=>
  string(29) "173.231.60.196, 172.69.42.111"
  [221]=>
  string(29) "103.131.71.104, 172.68.253.93"
  [222]=>
  string(30) "115.79.212.62, 162.158.162.107"
  [223]=>
  string(28) "115.79.212.62, 172.70.147.15"
  [224]=>
  string(30) "114.119.150.209, 172.70.147.15"
  [225]=>
  string(30) "114.119.150.22, 162.158.170.37"
  [226]=>
  string(29) "157.55.39.205, 162.158.107.52"
  [227]=>
  string(27) "162.55.86.61, 172.68.50.205"
  [228]=>
  string(29) "103.131.71.103, 172.68.253.93"
  [229]=>
  string(31) "114.119.159.135, 172.70.188.245"
  [230]=>
  string(29) "66.249.70.203, 172.70.134.223"
  [231]=>
  string(30) "114.119.144.36, 172.70.142.215"
  [232]=>
  string(28) "103.131.71.66, 172.68.253.93"
  [233]=>
  string(29) "66.249.66.157, 172.70.134.223"
  [234]=>
  string(28) "66.249.73.251, 172.69.69.221"
  [235]=>
  string(29) "66.249.66.222, 162.158.78.157"
  [236]=>
  string(29) "66.249.66.222, 172.70.134.223"
  [237]=>
  string(27) "162.55.86.61, 172.68.51.128"
  [238]=>
  string(28) "77.88.5.207, 162.158.129.135"
  [239]=>
  string(29) "103.131.71.191, 172.68.253.93"
  [240]=>
  string(29) "17.121.115.71, 172.70.206.181"
  [241]=>
  string(27) "185.191.171.7, 172.70.34.21"
  [242]=>
  string(30) "114.119.150.208, 172.70.188.87"
  [243]=>
  string(29) "103.131.71.190, 172.68.253.93"
  [244]=>
  string(29) "37.139.53.10, 162.158.238.203"
  [245]=>
  string(28) "103.131.71.94, 172.68.253.93"
  [246]=>
  string(27) "162.55.86.61, 172.68.50.131"
  [247]=>
  string(30) "116.96.44.180, 162.158.178.216"
  [248]=>
  string(55) "2405:4803:c83e:560:b0ba:27d9:cdc7:ef11, 162.158.179.132"
  [249]=>
  string(29) "87.250.224.123, 172.71.94.179"
  [250]=>
  string(29) "103.131.71.195, 172.68.253.93"
  [251]=>
  string(25) "3.238.98.39, 172.70.135.2"
}
Cách thêm widget cho wordpress mới nhất 2021

Cách thêm widget cho wordpress mới nhất 2021

Widget là các khối trong wordpress. Tiếp tục với chuyên mục WordPress Development bài viết sau ChuanSeoWeb sẽ hướng dẫn bạn cách thêm widget cho wordpress, cách tạo widget wordpress mà không cần dùng plugin. Bạn sẽ đăng ký được một khu vực widget area mới, biết cách cách tạo widget wordpress nhỏ để thêm vào khu vực widget area đã được khởi tạo. Với widget area có thể là sidebar, có thể là footer. Tùy vào mục đích bạn sử dụng mà bạn muốn nó hiển thị ở đâu. Bài viết dưới đây mình sẽ hướng dẫn chi tiết hơn.

Có thể bạn quan tâm: Code hiển thị sản phẩm theo category mới nhất

Widget wordpress là gì

Widget WordPress là một công cụ gồm các khối trong WordPress. Ở phiên bản mới 5.8 của WordPress Widget hiện giờ cách sử dụng có hơi khác một chút. Khi nó cho phép chỉnh sửa dạng khối dạng Gutenberg. Giúp dễ dàng chỉnh sửa hơn. Với Widget trong wordpress bạn dễ dàng thêm các dữ liệu như hình ảnh, danh sách cách chuyên mục, các bài viết mới nhất, …

Widget giúp cho việc tùy chỉnh website của bạn đơn giản hơn. Dễ dang tùy chỉnh các dữ liệu hơn, tùy vào cách bố trí khu vực Widget area của bạn. Việc sử dụng widget cũng khá đơn giản bạn bạn chỉ cần kéo thả các khối vào trong widget area. Ở phiên bản WordPress 5.8 bạn có rất nhiều khối để lựa chọn. Ngoài các khối ở phiên bản trước ở phiên bản mới này có thêm các khối Gutenberg giống như bạn soạn thảo một bài viết. Nên việc bạn biết cách thêm widget cho wordpress là rất cần thiết nếu bạn là một wordpress developer.

Widget trong wordpress 5.8
Widget trong wordpress 5.8

Cách thêm widget cho wordpress (register widget wordpress)

Việc cách thêm widget cho wordpress ở đây là mình khởi tạo hay đăng ký một widget area. Giống như một widget sidebar, widget footer, … Widget area là khu vực để bạn kéo thả các khối để bạn thả vào. Sau đây mình sẽ hướng dẫn bạn cách thêm widget cho wordpress. Bạn thêm đoạn code sau vào file function.php trong theme của bạn.

function chuanseowweb_widgets_init() {

	register_sidebar(
		array(
			'name'          => __( 'Footer CSW', 'ntl-csw' ),
			'id'            => 'footer-csw',
			'before_widget' => '<section id="%1$s" class="widget %2$s">',
			'after_widget'  => '</section>',
			'before_title'  => '<p class="widget-title">',
			'after_title'   => '</p>',
		)
	);

}
add_action( 'widgets_init', 'chuanseowweb_widgets_init' );

Mình giải thích chút các tham số có trong hàm register_sidebar () giúp bạn tạo ra widget area.

  • name: đây là tên của widget are hiển thị cho quản trị viên dễ theo dõi.
  • id: Tham số này là để chỉ ra wiget area. Nó phải là duy nhất không được trùng với widget area nào.
  • before_widget, after_widget: lần lượt là các thẻ mở và thẻ đóng của cả khối widget lớn
  • before_title, after_title: lần lượt là thẻ mở và đóng của tiêu đề widget.

Sau khi thêm đoạn code treen vào file function.php. Bạn sẽ tạo ra được widget area và dễ dàng thêm các khối vào trong nó.

 Cách thêm widget cho wordpress (widget area: Footer CSW)
Cách thêm widget cho wordpress (widget area: Footer CSW)

Để hiển thị widget area này bạn dùng hàm dynamic_sidebar(). Bạn sử dụng đoạn code sau để hiển thị widget area vào nới bạn muốn. Ở đây mình tạo ra một widget area là footer nên mình sẽ viết đoạn code này vào file footer.php

<?php
if ( is_active_sidebar( 'footer-csw' ) ) {
?>
    <div class="widget-column footer-widget">
	<?php dynamic_sidebar( 'footer-csw' ); ?>
    </div>
<?php
}
?>

Có thể bạn quan tâm: Hiển thị bài viết cùng chuyên mục trong wordpress


Cách tạo widget wordpress (Widget Item)

Sau khi bạn đã thêm được widget area thành công. Tiếp theo mình sẽ hướng dẫn bạn cách thêm cách tạo widget wordpress hay các khối widget item. Trong phần này mình sẽ hướng dẫn bạn cách tạo widget wordpress lấy danh sách các bài viết cùng chuyên mục, bài viết liên quan với bài viết hiện tại.

Đầu tiên trong theme của bạn bạn tạo thư mực widget. Trong thư mục này bạn tạo file đặt tên là: class-widget-csw-post-realted.php. Trong file này bạn dán đoạn code sau vào:

<?php
class csw_widget_post_related extends WP_Widget {

    function __construct() {

        $widget_ops = array(
            'classname'                   => 'widget-post-related',
            'description'                 => __( 'Widget này lấy ra danh sách các bài viết liên quan', 'ntl-csw' ),
            'customize_selective_refresh' => true,
        );
        parent::__construct( 'csw_wg_post_related', __( 'Bài viết liên quan csw', 'ntl-csw' ), $widget_ops );
    }

    public function widget( $args, $instance ) {
        $title = $instance['title'];
        $number_post = $instance['number_post'];
        $title = ! empty( $title ) ? $title : esc_html__( 'Bài viết liên quan', 'ntl-csw' );
        $number_post = ! empty( $number_post ) ? (int)$number_post : 5;

        $hierarchical = ! empty( $instance['hierarchical'] ) ? '1' : '0';

        echo $args['before_widget'];

        if ( $title ) {
            echo $args['before_title'] . $title . $args['after_title'];
        }


        $cat = get_the_category();

        if( $cat ){
            $agrs_cat = array(
                'cat' => $cat[0]->term_id
            );  
        }else{
            $agrs_cat = array();
        }

        $args_base=[
            'post_type' => 'post',
            'posts_per_page' => $number_post,
            'order' => 'desc',
        ];
        $args = array_merge($args_base, $agrs_cat);

        $blog = new \WP_Query($args);
        ?>
            
        <div class='csw-related-post'>
            <?php 
            if($blog->have_posts()) {
                while($blog->have_posts()) {
                $blog->the_post();
                $thumbnail_url = wp_get_attachment_image_url(get_post_thumbnail_id() , 'full' );
                ?>
                <div class="csw-item">

                    <?php if($thumbnail_url) { ?>
                        <div class="csw-media">
                            <a href="<?php echo get_the_permalink() ?>">
                                <img alt="<?php echo get_the_title() ?>" src="<?php echo esc_url($thumbnail_url) ?>" >
                            </a>
                       </div>
                    <?php } ?>
                    

                    <div class="csw-content">
                        <div class="post-title">
                            <h2 class="post-title">
                                <a href="<?php echo get_the_permalink() ?>"><?php echo get_the_title() ?></a>
                            </h2>
                        </div>

                        <div class="post-time">
                            <span><?php echo get_the_time( get_option( 'date_format' )) ?></span>
                        </div>

                        <div class="post-excerpt">
                            <p><?php echo get_the_excerpt() ?></p>
                        </div>

                        <div class="reade-more">
                            <a href="<?php echo get_the_permalink()?>"><?php esc_html_e('Đọc thêm', 'ntl-csw') ?></a>
                        </div>
                    </div>

                </div>
            <?php
                }
            } 
            wp_reset_postdata(); ?>
        </div>
        <?php

        echo $args['after_widget'];

    }

    public function form( $instance ) {

        $default = array(
            'title' => '',
            'number_post' => 5,
        );
       
        $instance  = wp_parse_args( (array) $instance, $default );
        ?>
        <p><label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Tiêu Đề:', 'ntl-csw' ); ?></label>
        <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $instance['title'] ); ?>" /></p>

        <p><label for="<?php echo $this->get_field_id( 'number_post' ); ?>"><?php _e( 'Số bài viết:', 'ntl-csw' ); ?></label>
        <input class="widefat" id="<?php echo $this->get_field_id( 'number_post' ); ?>" name="<?php echo $this->get_field_name( 'number_post' ); ?>" type="text" value="<?php echo esc_attr( $instance['number_post'] ); ?>" /></p>


        <?php 
    }

    public function update( $new_instance, $old_instance ) {
        $instance                 = $old_instance;
        $instance['title']        = sanitize_text_field( $new_instance['title'] );
        $instance['number_post']        = sanitize_text_field( $new_instance['number_post'] );

        return $instance;
    }

} 

function chuanseoweb_load_widget_post_realted() {
    register_widget( 'csw_widget_post_related' );
}

add_action( 'widgets_init', 'chuanseoweb_load_widget_post_realted' );

Tiếp theo bạn trong file function.php của theme bạn require file vừa tạo trên vào nhé:

require( get_template_directory() .  '/widget/class-widget-csw-post-realted.php' );

Mình giải thích qua một chút về các hàm trong class của file trên:

  • WP_Widget: Đây là class của core WordPress. Class của mình mới tạo là csw_widget_post_related kế thừa từ class đó để có thể sử dụng được các phương thức trong class core của wordpress đó.
  • __construct: đây là hàm khởi tạo. Bất kể khi nào khởi tạo đối tượng từ class csw_widget_post_related thì hàm __construct này sẽ được chạy đầu tiên.
  • widget: Hàm này hiển thị các bài viết ra ngoài cho người dùng xem. Bạn có thể tùy chỉnh html theo ý mình tại đây.
  • form: Hàm này giúp bạn tạo ra các setting trong widget
  • update: Giúp lưu các giá trị của setting trong widget.

Bạn kiểm tra trong Giao diện -> Widget bạn bấm vào khối xem nó đã hiện ra khối có tên là Bài viết liên quan csw chưa.

Tạo widget wordpress widget item bài viết liên quan
Tạo widget wordpress widget item bài viết liên quan

Có thể bạn quan tâm: Cách tao shortcode wordpress mới nhất 2021

Sau khi đã tạo được widget item rồi và nó đã hiện ra ngoài trang cho người dùng xem rồi. Tiếp theo bạn cần css cho nó để nó dễ nhìn hơn. Bạn sử dụng đoạn code css mình đã chuẩn bị sẵn sau để thêm vào file css trong theme:

.csw-related-post .csw-item {
  display: flex;
  flex-wrap: wrap;
}
.csw-related-post .csw-item:not(:last-child) {
  margin-bottom: 50px;
}
.csw-related-post .csw-item .csw-media {
  width: 220px;
  padding: 0 20px 0 0;
}
.csw-related-post .csw-item .csw-content {
  width: calc(100% - 220px);
}
.csw-related-post .csw-item .csw-content .post-title {
  font-size: 20px;
  line-height: 25px;
  color: #222;
  margin: 0 0 5px 0;
}
.csw-related-post .csw-item .csw-content .post-title a {
  font-size: 20px;
  line-height: 25px;
  color: #222;
}
.csw-related-post .csw-item .csw-content .post-title a:hover {
  color: #f00;
}
.csw-related-post .csw-item .csw-content .post-time {
  margin: 0 0 10px 0;
}
.csw-related-post .csw-item .csw-content .post-time span {
  font-size: 15px;
  line-height: 20px;
}
.csw-related-post .csw-item .csw-content .post-excerpt {
  margin-bottom: 20px;
}
.csw-related-post .csw-item .csw-content .post-excerpt p {
  margin: 0 0 10px 0;
  font-size: 17px;
  line-height: 24px;
  color: #666;
}
.csw-related-post .csw-item .csw-content .reade-more a {
  font-size: 17px;
  line-height: 20px;
  font-weight: 600;
  color: #fff;
  padding: 11px 24px 12px 23px;
  display: inline-flex;
  align-items: center;
  background: #222;
}
.csw-related-post .csw-item .csw-content .reade-more a:hover {
  background: #f00;
}

Sau khi thêm đoạn mã css trên thì bạn sẽ được giao diện bên ngoài tương đối dễ nhìn. Nếu tỉ mỉ hơn bạn có thể css thêm cho đẹp hơn.

Hiển thị bài viết liên quan trong widget
Hiển thị bài viết liên quan trong widget

Kết Luận

Qua bài viết trên mình đã hướng dẫn bạn cách thêm widget cho wordpress mới nhất ở bản WordPress 5.8. Mình hy vọng sẽ giúp ích cho bạn. Nếu có thắc mắc hay câu hỏi gì bạn để lại bình luận bên dưới. Cám ơn bạn đã quan tâm bài viết.

Nguyễn Luân

MÌnh là Luân. Mình có 4 năm kinh nghiệm trong lập trình website và 3 năm làm về WordPress theme và plugin. Rất hy vọng có cơ hội hợp tác với mọi người. Xin cám ơn.

Có thể bạn quan tâm

Hàm _e trong wordpress

3 Tháng Mười Một, 2021 Bởi

Hàm _e trong wordpress là một hàm khi bạn phát triển theme hay plugin nên biết. Hàm này có tác dụng in ra chuỗi và chuỗi này [...]

Hàm get_post_meta trong wordpress và các ví dụ

1 Tháng Mười Một, 2021 Bởi

Hàm get_post_meta trong wordpress là hàm để lấy giá trị meta value theo meta key của một bài viết, sản phẩm, hay bất kỳ [...]

Cách thêm sidebar cho wordpress không dùng plugin

7 Tháng Mười, 2021 Bởi

Bài viết sau mình sẽ hướng dẫn bạn cách thêm sidebar cho wordpress mà không cần dùng đến plugin. Bạn chỉ cần thêm một [...]

Hàm mktime trong php

15 Tháng Chín, 2021 Bởi

Việc hiểu về các hàm thời gian trong php và hàm mktime trong php sẽ giúp bạn dễ dàng hơn khi làm việc liên quan tới thời [...]

wp_head trong wordpress có tác dụng gì

14 Tháng Chín, 2021 Bởi

wp_head trong wordpress là một hook cho phép bạn thêm các tính năng tùy chỉnh vào cặp thẻ trong website. Với hook wp_head bạn [...]

Bạn để lại bình luận tại đây

favico-1

ChuanSeoWeb.com

Minh Phượng , Nham BIền, Yên Dũng, Bắc Giang
Thời gian hoạt động:
T.2 – T.7: 07:30 am – 5:30 pm